Alt-Text ist ein textliches Äquivalent für ein Bild. In HTML steht er im alt-Attribut eines img-Elements. In der Praxis soll er den Zweck des Bildes erhalten, wenn ein Nutzer das Bild nicht sehen kann. Ein Screenreader kann ihn vorlesen, eine reine Textansicht oder eine Verbindung mit wenig Bandbreite kann ihn anzeigen, und Suchsysteme können ihn zusammen mit der umgebenden Seite nutzen, um ein Bild zu verstehen. Er ist kein Feld, um eine Zielsuchanfrage oder einen einzelnen Ranking-Hebel zu wiederholen.
Zweck statt Keywords
Dieselben Pixel können je nach Kontext unterschiedliche Alternativen brauchen. Ein Foto einer blauen Tasse in einer Produktliste braucht vielleicht Produktname, Farbe und Material. In einem Artikel über den Büroalltag kann dagegen die nützliche Information sein, dass die Tasse neben einem Notizbuch steht. Dient das Foto nur der Dekoration eines Absatzes, der dieselbe Information bereits nennt, ist die richtige Alternative leer: alt="". Die Bildhinweise des W3C unterscheiden nach Zweck: Informative Bilder beschreiben wesentliche Informationen, funktionale Bilder beschreiben die Aktion oder das Ziel, dekorative Bilder erhalten eine leere Alternative.
- Informatives Bild
- Nennen Sie die Information, die dem Leser sonst entgeht: „Blaue Keramiktasse neben einem Notizbuch auf einem Schreibtisch.“
- Funktionales Bild
- Benennen Sie die Aktion oder das Ziel: „Zur Kasse“ ist nützlicher als „Warenkorb-Symbol“.
- Dekoratives Bild
- Verwenden Sie alt="", wenn das Bild keine Information liefert und kein interaktives Steuerelement ist.
- Komplexes Diagramm oder komplexe Grafik
- Setzen Sie eine kurze Zusammenfassung ins alt-Attribut. Ergebnisse, Beschriftungen und Daten gehören in den umgebenden Text oder in eine verlinkte Beschreibung.
Die richtige Alternative wählen
Beginnen Sie mit der Botschaft der Seite und entscheiden Sie dann, welche Rolle das Bild spielt. So vermeiden Sie den häufigen Fehler, ein hübsches Detail zu beschreiben und die Information zu verschweigen, die zum Verstehen der Seite nötig ist. Bei einem Diagramm reicht eine Beschriftung wie „Monatliche Anmeldungen“ selten aus. Der Text sollte auch Trend und die wichtigen Werte nennen. Bei einem Bildlink dokumentiert Google, dass der Alt-Text des Bildes als Ankertext genutzt wird. Die Alternative muss deshalb Ziel oder Aktion vermitteln. Ein dekoratives Bild innerhalb eines Links ist etwas anderes: Der Link braucht trotzdem einen zugänglichen Namen aus sichtbarem Text oder einem anderen verlässlichen Label.
| Bildeinsatz | Brauchbare Alternative | Was zu vermeiden ist |
|---|---|---|
| Produktfoto | Konkretes Produkt, unterscheidende Variante und sichtbarer Zustand | Werbeslogan oder eine wiederholte Einkaufssuche |
| Button mit Symbol | Die Aktion, etwa „Bericht herunterladen“ | „Blauer Pfeil“ |
| Diagramm | Kurzes Fazit plus umgebender Text mit allen Daten | Eine lange Werteliste im alt-Attribut |
| Dekorativer Trenner | Leeres alt-Attribut | Ein Dateiname oder allgemeines „Dekoration“ |
Alt-Text schreiben und prüfen
Schreiben Sie die Alternative, nachdem das Bild an seiner endgültigen Stelle im Text steht. Halten Sie sie so kurz, dass sie beim Vorlesen als Teil des Satzes wirkt. Stellen Sie den wichtigsten Unterschied an den Anfang und verwenden Sie Begriffe, die Leser schon auf der Seite sehen, sofern sie relevant sind. Legen Sie keine allgemeine Zeichenzahl fest: Ein Symbol braucht vielleicht zwei Wörter, ein Produktbild einen kurzen Satz. Lässt sich ein Sachverhalt nicht knapp ausdrücken, machen Sie die längere Erklärung im sichtbaren Seiteninhalt verfügbar.
- Ordnen Sie das Bild im endgültigen Seitenkontext als informativ, funktional, komplex oder dekorativ ein.
- Formulieren Sie die kürzeste Wendung, die den Zweck erhält. Streichen Sie „Bild von“ und andere Rahmung ohne Bedeutung.
- Vergleichen Sie die Alternative mit Bildunterschrift, Überschrift und Nachbartext, damit sie diese weder widerspricht noch bloß wiederholt.
- Prüfen Sie das gerenderte HTML auf das img-Element und den beabsichtigten alt-Wert. Bild-URLs und der Medientitel eines CMS sind kein Ersatz.
- Hören Sie bei einem repräsentativen Template mit einem Screenreader hin oder prüfen Sie den Accessibility-Tree. Danach nehmen Sie wiederholte Komponenten und fehlende Bilder als Stichprobe.
Unterscheiden Sie zuerst ein Bild, das eine Aussage trägt, von reiner Dekoration. Schreiben Sie dann den Alt-Text für diese Aussage, ohne Dateinamen oder Keywords hineinzupacken. Diese Vorgehensweise ist eine Prüfmethode und kein Beleg dafür, dass jedes Bild einer Website barrierefrei ist. Eine vollständige Prüfung kontrolliert außerdem gerenderte Templates, verlinkte Bilder und die redaktionellen Abläufe.
Grenzen und typische Fehler
Alt-Text unterstützt die Barrierefreiheit und gibt Suchsystemen einen relevanten Hinweis. Er kann aber kein unzugängliches Steuerelement, kein blockiertes Bild, keinen irrelevanten Seitentext und keine fehlende Texterklärung für eine komplexe Grafik reparieren. Google nutzt zum Verstehen von Bildern neben dem Alt-Text auch den Seitenkontext, Bildunterschriften und weitere Signale. Prüfen Sie Bildauffindbarkeit und die Qualität der Bild-Landingpage als getrennte Punkte.
- Verwenden Sie keinen Dateinamen, keinen CMS-Titel und keine Keyword-Liste als Alternative.
- Gehen Sie nicht davon aus, dass jeder gefüllte alt-Wert besser ist. Dekorative Bilder überspringen Sie normalerweise mit alt="".
- Lassen Sie den Alt-Text keine rechtlichen Hinweise, Daten oder Handlungsaufforderungen tragen, die sonst nirgends auf der Seite stehen.
- Verwenden Sie dieselbe allgemeine Alternative nicht für unterschiedliche Produktbilder, nur weil ein Template sie akzeptiert.
- Behaupten Sie nicht, dass ein Alt-Text Rankings, die Aufnahme von Bildern oder ein Ergebnis bei der Barrierefreiheit garantiert.