Alt-Texte richtig schreiben: Regeln und typische Fehler

Wofür ein Alt-Text da ist

Der Alt-Text ist die Textalternative eines Bildes und steht im Attribut alt. Screenreader lesen ihn vor, Braillezeilen zeigen ihn an, und der Browser zeigt ihn, wenn das Bild nicht lädt. Auch Suchmaschinen können ihn auswerten. Der Webstandard für Barrierefreiheit, WCAG, verlangt eine Textalternative, die dasselbe leistet wie das Bild (Erfolgskriterium 1.1.1, Stufe A).

Der Kern: Ein Alt-Text ist keine Bildunterschrift und keine Bildbeschreibung um ihrer selbst willen. Er sagt, was das Bild zur Seite beiträgt. Dasselbe Foto kann auf zwei Seiten unterschiedliche Alt-Texte brauchen oder gar keinen.

Vier Arten von Bildern

• Informative Bilder bringen Inhalt: ein Foto, ein Symbol neben einer Telefonnummer, ein Diagramm. Schreib einen kurzen Alt-Text, der diese Bedeutung vermittelt.
• Funktionale Bilder stecken in Links und Schaltflächen. Der Alt-Text nennt die Aktion oder das Ziel, nicht das Bild: „Suchen“ für eine Lupe, „Seite drucken“ für ein Druckersymbol.
• Dekorative Bilder bringen nichts: ein Rahmen, ein Platzhalter, ein Schmuckelement oder ein Bild, das nur den Text daneben wiederholt. Gib ihnen ein leeres alt-Attribut (alt=""), damit Screenreader sie überspringen, oder binde sie im Stylesheet als Hintergrund ein.
• Bilder von Text sind nur die letzte Lösung. Brauchst du eines, wiederholt der Alt-Text die Wörter im Bild. Ein Logo ohne Link bekommt den Namen der Organisation.

So schreibst du einen guten Alt-Text

1. 1Frag dich, warum das Bild auf der Seite ist. Was würde Besuchern fehlen, wenn es fehlte?
2. 2Schreib auf, was für diesen Zweck wichtig ist, in einer Wortgruppe oder einem Satz.
3. 3Beginne mit dem Inhalt. Ein Screenreader kündigt meist selbst an, dass es ein Bild ist, deshalb helfen „Bild von“ oder „Foto von“ selten.
4. 4Wiederhole nicht, was der Text neben dem Bild schon sagt. Sagt er alles, ist das Bild dekorativ und bekommt ein leeres alt.
5. 5Lies den Alt-Text laut vor, ohne die Seite zu sehen. Ergibt er für sich allein Sinn?

Typische Fehler

• Gar kein alt-Attribut. Manche Screenreader lesen dann den Dateinamen vor.
• Ein Dateiname oder Code als Alt-Text, zum Beispiel „IMG_2041.jpg“.
• Dieselbe Reihe von Suchbegriffen an vielen Bildern. Alt-Texte sind zuerst für Menschen.
• Eine lange Beschreibung für ein rein dekoratives Bild.
• Das Aussehen einer Schaltfläche beschreiben statt ihrer Aktion. Eine Suchschaltfläche ist keine „Lupe“, sie heißt „Suchen“.

Wie lang darf er sein?

WCAG 1.1.1 nennt keine Zeichenzahl. Der Rat des W3C: kurz halten, am besten eine Wortgruppe oder ein Satz. Bei Diagrammen und anderen komplexen Bildern gehören die vollständigen Informationen als Text auf die Seite, der Alt-Text bleibt kurz. Brauchst du mehr als einen Satz, trägt das Bild vermutlich Inhalt, der in den Seitentext gehört.

Prüfe deine Seite

Bilder ohne brauchbaren Alt-Text findest du mit dem kostenlosen Alt-Text-Prüfer für eine Seite. Für Vorschläge zu vielen Bildern gibt es das Werkzeug Alt-Texte. Ein automatischer Vorschlag kann übersehen, was auf deiner Seite zählt. Lies deshalb jeden Text und ändere ihn, wenn er nicht zum Zweck des Bildes passt.

Die Werkzeuge von Do4U helfen beim Tippen, nicht beim Entscheiden: Ob ein Bild informativ, funktional oder dekorativ ist, weißt du am besten. Prüfe nach größeren Umbauten deiner Seite noch einmal.