Alternativtext für Bilder

Ein dekorativer Schnörkel und ein Umsatzdiagramm verwenden beide das img-Element, aber der richtige Alternativtext ist beim ersten ein leerer String und beim zweiten ein ganzer Satz.

Wozu Alternativtext da ist

Ein Screenreader verwandelt eine Seite in Sprache oder Braille. Kommt er an ein Bild, kann er die Pixel nicht ansehen, also liest er stattdessen das Attribut alt. Derselbe Text erscheint, wenn ein Bild nicht lädt, und genau ihn bekommt eine Suchmaschine oder ein reiner Textbrowser. Die WCAG 2.2 stellen das ganz an den Anfang: Erfolgskriterium 1.1.1 Nicht-Text-Inhalt auf Stufe A verlangt, dass jedes Bild, Icon oder Diagramm, das eine Information trägt, eine Textalternative hat, die demselben Zweck dient.

Die entscheidenden Worte sind „demselben Zweck“. Alternativtext ist keine Bildunterschrift und keine Liste von allem, was im Bild zu sehen ist. Frag dich, was eine sehende Leserin an dieser Stelle aus dem Bild mitnimmt, und schreib genau das. Ein Foto eines Brotlaibs auf der Startseite einer Bäckerei braucht vielleicht nur „Sauerteigbrot, aufgeschnitten“. Dasselbe Foto in einem Artikel über die Farbe der Kruste braucht vielleicht „Sauerteigbrot mit dunkler, fast schwarzer Kruste und großporiger Krume“. Dieselbe Datei, eine andere Aufgabe, ein anderer Text.

Vier häufige Fälle

Das Bilder-Tutorial des W3C sortiert die meisten Bilder in ein paar Gruppen. Informative Bilder, etwa ein Foto oder ein einfaches Schaubild, bekommen eine kurze Beschreibung dessen, was sie zeigen. Dekorative Bilder, etwa eine Trennlinie oder eine Hintergrundtextur, bekommen ein leeres alt, geschrieben alt="", das assistiven Technologien sagt, sie zu überspringen. Funktionale Bilder, etwa ein Logo, das zur Startseite verlinkt, oder eine Lupe, die eine Suche abschickt, bekommen einen Text, der sagt, was passiert: „Corner Bakery home“ oder „Suche“, nicht „Logo“ oder „Lupe“. Bilder von Text bekommen die Wörter im Bild.

Das Attribut wegzulassen, ist nicht dasselbe, wie es leer zu lassen. Ganz ohne alt greifen manche Screenreader auf den Dateinamen zurück, und man hört dann etwa „IMG Unterstrich 4032 Punkt jpeg“. Ein leeres alt ist eine bewusste Entscheidung, die sagt: „Hier gibt es nichts zu sehen.“ Bei einem komplexen Diagramm halte das alt kurz („Balkendiagramm der monatlichen Umsätze, unten beschrieben“) und setz die Zahlen in eine Tabelle oder einen Absatz daneben, wo alle sie lesen können.

Bilder, die keine img-Elemente sind

Bilder können auch als Inline-SVG oder als CSS-Hintergrundbilder kommen. Ein CSS-Hintergrund hat überhaupt keinen Platz für Alternativtext, deshalb sollte er nur zur Dekoration dienen. Alles, was Bedeutung trägt, gehört ins HTML. Ein Inline-svg, das reine Dekoration ist, lässt sich mit aria-hidden="true" verbergen, wie Einheit 6 erklärt. Die WCAG setzen keine Zeichengrenze für Alternativtext, aber das W3C-Tutorial kommt immer wieder auf denselben Rat zurück: kurz sein und angeben, was in diesem Zusammenhang zählt. Wenn du drei Sätze schreibst, gehört der Inhalt wahrscheinlich in den Seitentext, wo alle ihn lesen können.

Du kannst deine eigenen Seiten ohne besondere Software prüfen. Lass dir den Quelltext anzeigen und such nach <img: Jeder Treffer sollte ein alt-Attribut haben, leer oder nicht. Die Entwicklerwerkzeuge der großen Browser haben außerdem einen Barrierefreiheitsbereich, der zeigt, welchen Namen jedes Bild am Ende bekommt. Diese Namen hintereinander und ohne Zusammenhang zu lesen, ist ein guter Test. Steht in einer Liste „Bild, Bild, Diagramm, Logo“, hört ein Screenreader-Nutzer genau das.