Bilder mit Textalternativen beschreiben
Der Alt-Text beschreibt die relevante Information oder Funktion eines Bildes. Bei einem HTML-Bild steht er im alt-Attribut des <img>-Elements. Dieses erfundene Beispiel beschreibt den Zugang zu einer Praxis:
<img src="eingang.jpg" alt="Praxiseingang mit Rampe rechts neben der Treppe">
Eine passende Textalternative macht Bildinformationen für Menschen zugänglich, die das Bild nicht sehen können. Screenreader können den Text vorlesen oder auf einer Braillezeile ausgeben. Bei einem verlinkten Bild kann der Alt-Text zum zugänglichen Namen des Links beitragen. Browser können ihn außerdem anzeigen, wenn das Bild nicht lädt.
Die WCAG-Anforderung 1.1.1 auf Stufe A verlangt für informative Bilder eine Textalternative, die denselben Zweck erfüllt. Das alt-Attribut ist bei <img> der übliche Weg. Für die Bewertung zählt die verfügbare Textalternative; ein fehlendes alt allein beweist noch nicht, dass ein Bild über keinen anderen unterstützten Weg beschrieben ist.
Der Alt-Text steht im Code. Eine sichtbare Bildunterschrift kann ergänzende Informationen liefern. Ist die relevante Bildinformation bereits vollständig im benachbarten Text enthalten, kann ein leerer Alt-Text Wiederholungen vermeiden.
Alt-Texte und die Bildersuche
Google nutzt Alt-Texte zusammen mit Bildanalyse und Seiteninhalt, um Bilder thematisch einzuordnen. Ein aussagekräftiger Alt-Text liefert dafür zusätzliche Informationen.
Verwende Begriffe, die zum sichtbaren Motiv und seinem Zweck auf der Seite passen. Ein erfundenes Beispiel für einen Screenshot wäre alt="SEO-Audit-Report mit Ergebnisübersicht und Handlungsempfehlungen". Die Formulierung alt="SEO Audit SEO Analyse SEO Check beste SEO Agentur" ist dagegen eine Keyword-Liste ohne Bildbeschreibung. Google rät von solchen Listen ab; sie können als Spam gewertet werden. Ein bestimmtes Ranking lässt sich aus einem Alt-Text nicht ableiten.
Gute Alt-Texte schreiben
Beschreibe die Information, die das Bild an dieser Stelle vermittelt. Bei einer Schaltfläche oder einem Link braucht der Leser dagegen die Funktion oder das Ziel. Diese Fragen helfen bei der Formulierung:
- Welche Details braucht jemand, der das Bild nicht sieht?
- Welche Information steht bereits im Text daneben?
- Führt ein Klick auf das Bild zu einer Seite oder löst er eine Aktion aus?
Die folgenden erfundenen Beispiele zeigen, wie sich der Text nach dem Zweck des Bildes richtet:
| Bild | Schlecht | Gut |
|---|---|---|
| Produktfoto | alt="Bild" |
alt="Rote Leder-Handtasche mit Goldschnalle, Seitenansicht" |
| Team-Foto | alt="IMG_4521.jpg" |
alt="Das fünfköpfige Entwicklerteam im Büro München" |
| Infografik | alt="Infografik" |
alt="Fünf Schritte zum SEO-Audit, im folgenden Abschnitt beschrieben" – alle Schritte stehen dort auch als Text |
| Logo als einziger Inhalt eines Links | alt="Foto von Logo" |
alt="ClariSEO – Startseite" |
| Stadtansicht | alt="bild stadt" |
alt="Panoramablick auf die Münchner Altstadt bei Sonnenuntergang" |
| Screenshot | alt="Screenshot" |
alt="Bericht zur Seitenindexierung mit 15 indexierten Seiten" |
| Porträt | alt="Person" |
alt="Dr. Maria Mustermann, Gründerin und Steuerberaterin der Musterkanzlei" |
Für funktionale Bilder empfiehlt das W3C, die Aktion oder das Linkziel zu benennen. Bei einem Druckersymbol auf einem Button passt beispielsweise „Seite drucken“. „Drucker“ allein erklärt die Funktion weniger klar.
Länge und ausführliche Beschreibungen
Die nötige Länge hängt vom Zweck des Bildes ab. Eine feste Zeichenzahl sagt nicht, ob der Text diesen Zweck erfüllt. Ein Firmenname kann als Alternative zu einem unverlinkten Logo genügen. Ein Foto braucht je nach Kontext mehr Beschreibung.
Das W3C empfiehlt kurze, zweckbezogene Textalternativen. Wenn mehr als ein kurzer Satz nötig ist, ergänze eine ausführliche Beschreibung auf der Seite. Der Alt-Text benennt dann das Bild und verweist auf diese Beschreibung.
Für ein komplexes Diagramm reicht eine Überschrift allein nicht. Werte, Zusammenhänge und andere wesentliche Informationen müssen ebenfalls als Text zugänglich sein, zum Beispiel in einer Tabelle oder einem erklärenden Abschnitt neben der Grafik. Die W3C-Beispiele für komplexe Bilder zeigen, wie sich kurze und ausführliche Beschreibungen ergänzen.
Ein erfundenes Beispiel wäre alt="Balkendiagramm zum SEO-Traffic im Jahresvergleich. Monatswerte stehen in der folgenden Tabelle.". Die genannte Tabelle muss die Monatswerte beider Jahre enthalten. Der Verweis allein ersetzt diese Informationen nicht.
Dekorative und bereits beschriebene Bilder
Dekorative Bilder wie Trennlinien erhalten ein leeres alt-Attribut. Das gilt auch für Bilder, deren Information oder Funktion bereits vollständig als benachbarter Text vorliegt, etwa ein Logo im selben Link wie der Text „Zur Startseite“. Der W3C-Entscheidungsbaum hilft bei der Einordnung.
Diese Beispiele unterscheiden eine dekorative Trennlinie von einem informativen Foto:
<!-- Decorative image: no additional text alternative needed. -->
<img src="trennlinie.svg" alt="">
<!-- Informative image: describe the relevant content. -->
<img src="eingang.jpg" alt="Praxiseingang mit Rampe rechts neben der Treppe">
Ein leeres alt="" kennzeichnet ein Bild ohne zusätzliche Textalternative. Bei einem rein dekorativen Bild ohne weitere benennende Attribute führt das üblicherweise dazu, dass Screenreader es übergehen. Bei einem fehlenden alt können sie ersatzweise den Dateinamen oder eine URL ausgeben. Das konkrete Verhalten hängt auch vom übrigen HTML, Browser und Hilfsmittel ab. Die W3C-Anleitung zu dekorativen Bildern erklärt diese Unterscheidung.
Dateinamen als Alt-Text erkennen
Prüfe beim Bearbeiten eines Bildes, ob im Alt-Text versehentlich der Dateiname steht. Beispiele dafür sind:
alt="IMG_4521.jpg"alt="header-banner-v2.png"alt="foto-neu-final-2.webp"alt="screenshot_2024-03-15.png"
Diese Beispiele beschreiben den Bildinhalt kaum. ClariSEO erkennt bestimmte Dateinamensmuster mit Endungen wie JPG, PNG oder WebP im Alt-Text. Der Befund ist ein Anlass, die Beschreibung im Seitenkontext zu prüfen.
Trage den passenden Text im Alt-Text-Feld deines CMS ein und kontrolliere anschließend die veröffentlichte Seite. Bildtitel, Dateiname und Alternativtext können getrennte Felder sein. Die WordPress-Bildfunktion liest beispielsweise das gespeicherte Alt-Text-Feld; sie setzt nicht pauschal den Dateinamen als Ersatz ein. Themes und Plugins können die Ausgabe verändern.
Redundante Formulierungen vermeiden
Screenreader kündigen Bilder häufig bereits als Grafik an. Zusätze wie „Bild von“ oder „Image of“ wiederholen dann diese Information. Beschreibe das Motiv direkt, etwa alt="Golden Retriever spielt mit Ball im Englischen Garten".
Die Art des Bildes kann aber selbst relevant sein: Ein Gemälde, ein Foto und ein Screenshot vermitteln unterschiedliche Informationen. Nenne sie, wenn der Unterschied zum Verständnis beiträgt. Die W3C-Schreibtipps für Alt-Texte empfehlen kurze Beschreibungen und erlauben solche Angaben, wenn sie helfen.
Häufige Fehler
Fehlendes Alt-Attribut
Prüfe, ob eine andere zugängliche Textalternative vorhanden ist oder das Bild rein dekorativ und vor Hilfsmitteln verborgen ist. Fehlt einem informativen Bild jede passende Textalternative, fehlt die nach WCAG 1.1.1 erforderliche Information. Verwende bei <img> möglichst das alt-Attribut: beschreibend für informative Bilder, leer für dekorative oder vollständig redundante Bilder.
Leeres Alt-Attribut ohne gleichwertige Information
Das Bild hat alt="", obwohl seine Information oder Funktion an keiner anderen Stelle als zugänglicher Text verfügbar ist. Ergänze eine passende Textalternative. Ist die Information bereits vollständig im benachbarten Text enthalten, kann alt="" dagegen richtig sein; bei einem verlinkten Bild muss auch der Link verständlich benannt bleiben.
Unnötig ausführlicher Alt-Text
Streiche Wiederholungen und Details, die für den Zweck des Bildes keine Rolle spielen. Lass dabei keine wesentlichen Informationen weg, nur um eine bestimmte Zeichenzahl einzuhalten. Braucht das Bild eine längere Erklärung, stelle sie als gegliederten Text oder Tabelle auf der Seite bereit und verweise im Alt-Text darauf.
Ein automatisierter Hinweis kann zeigen, dass ein Attribut fehlt oder wie ein Dateiname aussieht. Ob die Beschreibung den Zweck des Bildes trifft, musst du am Bild und seinem Kontext prüfen. Welche weiteren Befunde ClariSEO untersucht, beschreibt der Barrierefreiheits-Check.