Alternativtext und WCAG: Bilder beschreiben, mit Beispielen

Über jedes Bild auf einer Seite muss entschieden werden: Was soll jemand, der es nicht sehen kann, stattdessen hören? Dafür gibt es den Alternativtext (Alt-Text). Screenreader lesen ihn vor, Suchmaschinen nutzen ihn, und Browser zeigen ihn an, wenn das Bild nicht geladen werden kann. Die WCAG schreiben keinen genauen Wortlaut vor, stellen aber eine klare Anforderung, und das W3C veröffentlicht ein praktisches Tutorial, wie man sie erfüllt. Diese Seite fasst beides zusammen, mit Beispielen aus Online-Shops.

Das sind allgemeine Informationen, keine Rechtsberatung.

Was die WCAG verlangen

Die Anforderung ist 1.1.1 Nicht-Text-Inhalt, Stufe A: Alle Nicht-Text-Inhalte, die Nutzern präsentiert werden, haben eine Textalternative, die denselben Zweck erfüllt. Es gibt Ausnahmen. Bedienelemente brauchen einen Namen, der ihren Zweck beschreibt; zeitbasierte Medien, Tests, sensorische Erfahrungen und CAPTCHAs brauchen nur eine beschreibende Bezeichnung; und Dekoration, Formatierung oder unsichtbare Inhalte müssen so umgesetzt sein, dass assistive Technologien sie ignorieren können.

Zwei weitere Kriterien hängen eng damit zusammen:

• 1.4.5 Bilder eines Textes (AA): Verwenden Sie echten Text statt Text, der in ein Bild eingebettet ist, es sei denn, der Text im Bild lässt sich vom Nutzer anpassen oder eine bestimmte Darstellung ist unerlässlich; Logotypen gelten als unerlässlich.
• 2.4.4 Linkzweck (im Kontext) (A): Ist ein Bild der einzige Inhalt eines Links, ist sein Alternativtext der Linktext.

Das Schlüsselwort ist Zweck. Im Dokument „Understanding“ des W3C braucht dasselbe Bild eines Globus auf einer Website „Internationale Reisen“ und auf einer anderen „Internationale Standorte“. Der Kontext entscheidet, nicht die Pixel.

Der W3C-Entscheidungsbaum in fünf Fragen

Der Alt-Entscheidungsbaum des W3C fragt in dieser Reihenfolge:

1. Enthält das Bild Text? Steht derselbe Text auch in der Nähe als echter Text, oder ist der Text nur ein optischer Effekt, verwenden Sie ein leeres Alt. Ist es ein Icon mit einer Funktion, beschreiben Sie die Funktion. Andernfalls enthält das Alt den Text des Bildes.
2. Steht das Bild in einem Link oder Button, und wäre sein Zweck ohne das Bild unklar? Dann beschreibt das Alt das Ziel oder die Aktion.
3. Fügt das Bild Bedeutung hinzu? Ein einfaches Foto oder eine Grafik bekommt eine kurze Beschreibung dieser Bedeutung; ein Diagramm braucht die Information zusätzlich an anderer Stelle der Seite; ein Bild, das nahestehenden Text wiederholt, bekommt ein leeres Alt.
4. Ist es rein dekorativ? Dann verwenden Sie ein leeres Alt.
5. Nichts davon? Der Baum deckt nicht jeden Fall ab; siehe das vollständige Tutorial zu Bildern.

Informative Bilder

Fotos und Illustrationen, die Informationen tragen, bekommen eine kurze Beschreibung der wesentlichen Information, wie es das W3C-Tutorial formuliert. In einem Shop sind das vor allem Produktfotos.

Unsere Empfehlungen über die WCAG hinaus: Sagen Sie, was jemandem sonst fehlen würde – Farbe, Material, das Detail, das das Foto zeigen soll. Beginnen Sie nicht mit „Bild von“; Screenreader kündigen ein Bild ohnehin an. Halten Sie es kurz und schreiben Sie lange Spezifikationen in die Produktbeschreibung, wo alle sie lesen können.

Dekorative Bilder

Hintergrundtexturen, Trennlinien, Stimmungsbilder neben einer Überschrift, die schon alles sagt: Verwenden Sie alt="" (ein leeres Attribut) oder einen CSS-Hintergrund. Das leere Alt sagt Screenreadern, das Bild zu überspringen. Das Attribut wegzulassen ist nicht dasselbe: Ohne es lesen Screenreader unter Umständen den Dateinamen oder die URL vor.

Seien Sie vorsichtig mit „dekorativ“. Ein Lifestyle-Foto auf einer Landingpage kann dekorativ sein; dasselbe Foto auf einer Produktseite, das zeigt, wie das Produkt verwendet wird, ist es nicht.

Funktionale Bilder: Links, Buttons und Icons

Ist ein Bild der einzige Inhalt eines Links oder Buttons, benennt sein Alternativtext das Ziel oder die Aktion, nicht das Bild. Das W3C-Tutorial zu funktionalen Bildern verwendet diese Beispiele:

• ein Logo, das auf die Startseite verlinkt: „W3C home“, nicht „Logo“;
• eine Lupe auf einem Such-Button: „Search“ (Suchen);
• ein Druckersymbol: „Print this page“ (Seite drucken), nicht „Drucker“.

In einem Shop ergibt derselbe Gedanke „Warenkorb“, „Aus dem Warenkorb entfernen“, „Nächstes Foto“, „Zur Wunschliste hinzufügen“. Steht das Icon neben sichtbarem Text, der es schon sagt – ein Warenkorb-Icon gefolgt vom Wort „Warenkorb“ –, bekommt das Icon selbst ein leeres Alt oder wird vor assistiven Technologien verborgen, damit der Name nicht doppelt vorgelesen wird.

Logos

• Logo als einziger Inhalt eines Links zur Startseite: Das Alt sagt, wohin der Link führt, zum Beispiel „Beispiel-Shop Startseite“.
• Logo neben dem Firmennamen als Text im selben Link: leeres Alt, weil der Text es schon benennt.
• Partner- oder Zahlungslogos: Das Alt nennt die Marke („Visa“, „Trusted Shops“), weil das Logo diese Information trägt.

Logos sind außerdem von der Kontrastanforderung und von 1.4.5 Bilder eines Textes ausgenommen.

Bilder von Text

Sale-Banner mit dem Rabatt im Bild sind der klassische Shop-Fall. Nach 1.4.5 sollte solcher Text wo möglich echter HTML-Text über dem Bild sein, damit er sich zoomen, umfärben und übersetzen lässt. Bleibt ein Bild von Text bestehen, sagt das W3C-Tutorial, dass die Textalternative dieselben Worte wie im Bild enthalten sollte – das ganze „Sommer-Sale −30 % bis 31. August“, nicht „Banner“.

Komplexe Bilder und Gruppen

• Diagramme, Größentabellen als Bilder, Infografiken: ein kurzes Alt, das sagt, was es ist, plus die vollständige Information als Text oder Tabelle in der Nähe. Das W3C empfiehlt, die zugrunde liegenden Daten bereitzustellen, wo es praktikabel ist.
• Gruppen von Bildern, etwa die fünf Sterne einer Bewertung: eine Alternative für die ganze Gruppe („Bewertet mit 4 von 5“), die übrigen Bilder leer.

Was ein automatischer Bild-Check findet

Unsere Prüfungen nutzen die axe-core-Regeln für Textalternativen in einem echten Browser. Sie finden:

• Bilder ohne jede Textalternative (image-alt);
• Bild-Buttons ohne Beschreibung (input-image-alt);
• Elemente mit Bildrolle und SVG-Grafiken ohne Textalternative (role-img-alt, svg-img-alt) – Sternebewertungen, Icons, Badges;
• Bereiche von Image Maps ohne Beschreibung (area-alt) und eingebettete Objekte ohne Beschreibung (object-alt);
• Links und Buttons ohne zugänglichen Namen, was oft ein Icon ohne Beschriftung bedeutet;
• als Best Practice Alternativtexte, die den daneben sichtbaren Text wiederholen (image-redundant-alt).

Was kein automatisches Werkzeug beurteilen kann: ob „Blaues Leinenhemd“ die richtige Beschreibung ist, ob ein als dekorativ markiertes Bild wirklich dekorativ ist und ob ein Banner Text enthält. Das braucht einen Menschen. Mehr dazu in der Regelbibliothek.

So prüfen Sie Ihre Bilder

1. Lassen Sie den kostenlosen WCAG-Checker über eine Produktseite und eine Kategorieseite laufen; er listet Bilder ohne Alternativen mit einem Screenshot von jedem auf.
2. Lesen Sie die Alternativtexte Ihrer wichtigsten Templates: Produkt, Kategorie, Startseite, Warenkorb.
3. Schalten Sie einen Screenreader ein oder betrachten Sie den Accessibility-Tree in den Entwicklertools Ihres Browsers und hören Sie sich eine Produktseite an.
4. Beheben Sie zuerst das Template, dann die Bilder: Die meisten Shopsysteme erlauben es, den Alternativtext jedes Produktfotos im Admin-Bereich zu setzen.

Unsere Prüfungen sind eine automatische Prüfung, kein vollständiges Audit und keine Rechtsberatung. Die übrigen Kriterien zu Bildern und Farben finden Sie in unserer WCAG-Übersicht und in der WCAG-2.2-Checkliste.

Häufige Fragen

Was sagen die WCAG zum Alternativtext?

Das Erfolgskriterium 1.1.1 Nicht-Text-Inhalt (Stufe A) verlangt für alle Nicht-Text-Inhalte eine Textalternative, die denselben Zweck erfüllt. Dekorative Bilder müssen so umgesetzt sein, dass assistive Technologien sie ignorieren können, meist mit einem leeren alt-Attribut.

Wann sollte der Alternativtext leer sein?

Wenn das Bild rein dekorativ ist oder wenn dieselbe Information direkt daneben schon als Text steht, zum Beispiel ein Logo neben dem sichtbaren Firmennamen im selben Link. Verwenden Sie alt="". Das Attribut wegzulassen ist ein Fehler, denn Screenreader lesen dann unter Umständen den Dateinamen vor.

Wie schreibe ich den Alternativtext für einen Icon-Button?

Beschreiben Sie die Aktion, nicht das Bild: „Suchen“ für eine Lupe, „Seite drucken“ für ein Druckersymbol, „Aus dem Warenkorb entfernen“ für einen Papierkorb. Das W3C-Tutorial zu Bildern nennt die ersten beiden als Beispiele.

Kann ein Bild-Check erkennen, ob mein Alternativtext gut ist?

Nur teilweise. Automatische Prüfungen finden Bilder, Bild-Buttons, SVG-Grafiken und Bereiche von Image Maps ganz ohne Textalternative sowie Alternativtexte, die nahestehenden Text wiederholen. Ob der Text das Bild wirklich beschreibt, muss ein Mensch beurteilen.

Sind Bilder von Text nach den WCAG erlaubt?

Auf Stufe AA verlangt 1.4.5 Bilder eines Textes, echten Text statt Text in Bildern zu verwenden, wo die Technik es erlaubt. Logos sind eine Ausnahme. Wenn Sie ein Bild von Text einsetzen, sollte sein Alternativtext dieselben Worte enthalten.

Quellen

• W3C, Understanding 1.4.5 Images of Text: https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html
• W3C, Understanding 1.1.1 Non-text Content: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html
• W3C WAI, Images tutorial: https://www.w3.org/WAI/tutorials/images/
• W3C WAI, An alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
• W3C WAI, Functional images: https://www.w3.org/WAI/tutorials/images/functional/
• W3C, WCAG 2.2: https://www.w3.org/TR/WCAG22/