Wie schreibt man Bildbeschreibungen, die eine Seite verständlicher machen?
Verwende zweckbezogene Alternativtexte statt Suchbegriffe in jedes Bild zu stecken.
Beginn mit dem Zweck
Frag, warum das Bild auf der Seite steht. Identifiziert es eine Person, zeigt ein Produkt, erklärt einen Ablauf, liefert einen Nachweis, vermittelt ein Ergebnis oder funktioniert als Link? Die Antwort bestimmt die Beschreibung. Alternativtext soll die Rolle des Bildes vermitteln, nicht alles Sichtbare aufzählen.
Ein Bild auf einer Leistungsseite zeigt vielleicht eine Badsanierung. Unterstützt es die Aussage über barrierearme Gestaltung, sind ebenerdige Dusche und Haltegriffe relevant. Ist es nur Atmosphäre neben derselben Erklärung, kann es dekorativ sein.
Lies Überschrift und Absatz zuerst. Die Beschreibung soll fehlende Information ergänzen, nicht die Bildunterschrift wiederholen. Ein Bild kann in Fallstudie, Produktseite und Teamprofil unterschiedliche Bedeutung haben.
Erkenn dekorative Bilder
Dekorative Bilder geben Stimmung, Abstand oder Gestaltung, aber keine Information für Verständnis oder Bedienung. Beispiele sind Hintergrundtextur, Trennlinie, wiederholtes Muster und Stockfoto ohne zusätzliche Aussage. Leerer Alternativtext lässt assistive Technik sie überspringen.
Nenn ein Bild nicht dekorativ, nur weil eine Beschreibung schwierig ist. Wenn Entfernen Anspruch, Anleitung, Produktwahl oder Link unverständlicher macht, trägt das Bild Bedeutung. Beschreib diesen Beitrag oder stell ihn als Text bereit.
Wiederholte Icons brauchen Aufmerksamkeit. Neben sichtbarer Beschriftung können sie dekorativ sein. Ist das Icon der einzige Hinweis auf Suche, Download, Warnung oder Status, braucht es einen zugänglichen Namen. Ein visuelles Symbol wird nicht automatisch von allen verstanden.
Beschreib informative Bilder kurz
Ein informatives Foto braucht meist eine kurze, konkrete Beschreibung. Nenn Gegenstand, Handlung und wichtigen Kontext. „Eine Person“ ist zu ungenau; „Ein Elektriker prüft den Sicherungskasten in einer renovierten Küche“ vermittelt mehr. Farben und Hintergrund müssen nur bei Relevanz erwähnt werden.
Beginn nicht mit „Bild von“, wenn die Technik das Bild ohnehin ankündigt. Vermeide Bewertungen wie „schön“ oder „professionell“, außer sie sind die Botschaft. Schreib in der Sprache der Seite und nenn den Namen einer Person nur, wenn ihre Identität relevant und angemessen ist.
Die Beschreibung muss zur Aussage passen. Bei einem Projektfoto erklärst du, was das Projekt zeigt. Bei einem Porträt nennst du Person und Rolle, wenn das hilft. Bei einem Produkt nennst du Modell oder Variante, die für eine Auswahl nötig ist.
Behandle Text, Diagramme und komplexe Bilder
Text in Bildern kann unzugänglich sein. Stell wichtige Worte zusätzlich als HTML, Bildunterschrift oder zugängliches Element bereit. Alternativtext allein sollte keine ausführliche Anleitung oder ein Angebot tragen.
Diagramme brauchen mehr als einen Titel. Nenn die Hauptaussage und stell Daten oder längere Erklärung daneben. „Umsatz pro Quartal“ sagt nicht, ob Umsatz gestiegen, gefallen oder gleich geblieben ist.
Karten, Ablaufbilder und Infografiken brauchen ebenfalls einen Weg zur gleichen Entscheidung. Der Text muss nicht jedes Pixel wiederholen, aber Beziehung, Richtung, Option oder Ergebnis verständlich machen.
Beschreib funktionale Bilder
Ist das Bild ein Link oder Button, beschreib Handlung oder Ziel, nicht das Aussehen. Ein Logo zum Start könnte „ChatBuild Startseite“ heißen. Ein Lupen-Icon braucht „Suchen“. Ein Produktbild zum Detail nennt Produkt und Ziel.
Vermeide doppelte Ansagen. Steht ein Bildlink neben einem Textlink zum gleichen Ziel, kann das Bild dekorativ sein oder beide werden zu einem Link. Doppelte Titel erzeugen unnötige Arbeit für Screenreader-Nutzer.
Prüf Zustände. Wenn ein Icon nicht verfügbar, ausgewählt, geöffnet oder geschützt anzeigt, muss Name oder Kontext diesen Zustand nennen. „Kalender“ ist falsch, wenn die Aktion inzwischen „Kalender schließen“ heißt.
Richte eine Reviewroutine ein
Alternativtexte gehören in den Veröffentlichungsprozess, nicht nur in SEO. Frag, was jedes Bild ergänzt, ob sich der Zweck geändert hat und ob der Text nebenan wiederholt wird. Dekorative Bilder bleiben leer, informative kurz und komplexe durch Daten oder Erklärung unterstützt.
Füll Beschreibungen nicht mit Suchbegriffen. Die Sichtbarkeit in Suchmaschinen verbessert sich nicht, wenn eine Phrase in jedem Bild wiederholt wird, und mit Keywords gefüllter Text macht Seiten für Nutzer assistiver Technik anstrengend. Verwende einen Begriff nur, wenn er Thema, Produkt oder Ziel natürlich benennt.
Prüf alte Seiten nach Redesign, Produktwechsel und Kampagnen. Der frühere Text kann bei anderem Ausschnitt oder anderer Botschaft falsch sein.
Quellen
- Images Concepts · W3C
- Decorative Images · W3C
- Image best practices · Google Search Central
Häufige Fragen
- Was sollte Alternativtext beschreiben?
- Information, Gegenstand oder Funktion, die das Bild ergänzt. Beschreib, was zum Verstehen oder Handeln nötig ist, statt jedes visuellen Details.
- Wann ist leerer Alternativtext richtig?
- Bei echter Dekoration ohne Information oder Funktion. So kann assistive Technik das Bild überspringen, ohne dass Bedeutung verloren geht.
- Gehören Keywords in Bildbeschreibungen?
- Nur wenn sie Thema, Produkt oder Ziel natürlich benennen. Wiederhol Keywords nicht für SEO; das macht Beschreibungen weniger nützlich.
- Wie beschreibt man ein Diagramm?
- Nenn die Hauptaussage kurz und stell Daten oder längere Erklärung zugänglich daneben.
Sjors Hooijen Builds ChatBuild and writes about getting a business online without turning it into a project. Fragen zu diesem Artikel? Schreib an hi@chatbuild.com.