Barrierefreie Bilder: Alt-Text, dekorative Bilder und WCAG

Was sind barrierefreie Bilder?

Barrierefreie Bilder geben Menschen, die sie nicht sehen können, über eine Textalternative dieselbe Information oder Funktion wie allen anderen. In HTML ist das meist das alt-Attribut am img-Element. Das WCAG-Erfolgskriterium 1.1.1 (Stufe A) verlangt für Nicht-Text-Inhalte eine Textalternative, die denselben Zweck erfüllt. Reine Dekoration ist nur ausgenommen, wenn sie so umgesetzt ist, dass assistive Technologien sie ignorieren können.

Vom Zweck ausgehen, nicht vom Bild

Die richtige Textalternative hängt davon ab, warum das Bild auf der Seite steht. Das W3C WAI Images Tutorial (auf Englisch) formuliert es so: Sie wird vom Autor nach Verwendung, Kontext und Inhalt bestimmt. Ein Vogelfoto braucht auf einer Parkseite eine kurze Erwähnung und auf einer Vogelkunde-Seite eine ausführliche Beschreibung. Frag dich, wofür das Bild da ist, und wähle dann den Typ:

So sieht es in HTML aus

<!-- Informativ: die Bedeutung nennen -->
<img src="dog.jpg" alt="Hund mit einer Glocke am Halsband">

<!-- Dekorativ: leeres Alt, es wird nichts vorgelesen -->
<img src="divider.png" alt="">

<!-- Funktional: die Aktion beschreiben, nicht das Bild -->
<a href="/print"><img src="printer.svg" alt="Diese Seite drucken"></a>

Ein Screenreader liest den Alt-Text anstelle des Bildes vor. Fehlt das Attribut, kann der Screenreader stattdessen den Dateinamen ansagen, was bestenfalls Rauschen ist. Ein leeres alt="" sagt ihm, das Bild bewusst zu überspringen, und das ist etwas anderes, als das Attribut wegzulassen.

Komplexe Bilder

Ein Diagramm braucht zwei Teile: ein kurzes Alt, das das Bild benennt, und eine lange Beschreibung im Seiteninhalt mit den wesentlichen Informationen. Das WAI-Tutorial beschreibt mehrere Wege, beides zu verbinden: ein Link neben dem Bild, ein figure mit figcaption oder aria-describedby, das auf einen Absatz zeigt. Letzteres behandelt das Ziel als einen zusammenhängenden Absatz und eignet sich daher nur für reinen Text, nicht für Überschriften oder Tabellen. Eine Datentabelle neben dem Diagramm hilft oft allen am meisten.

Wo ARIA ins Spiel kommt

Bevorzuge natives HTML. Das alt-Attribut ist der primäre Mechanismus. Laut WAI-Tutorial wird role="presentation" für dekorative Bilder weniger breit unterstützt als ein leeres alt. Greife zu ARIA, wenn HTML allein die Beziehung nicht ausdrücken kann, etwa mit aria-describedby für eine lange Beschreibung. Dekorative Bilder lieferst du besser als CSS-Hintergründe aus, dann bleiben sie aus dem Markup heraus.

Häufige Fehler

• Kein Alt-Attribut. Der Dateiname wird eventuell vorgelesen, und automatische Prüfer markieren es.
• Dateiname oder „Bild von“ als Alt. Nenne, was das Bild vermittelt. Bei einem funktionalen Bild ist „Diese Seite drucken“ besser als „(Bild eines) Druckers“.
• Benachbarten Text wiederholen. Sagt ein Link schon „Preise“, braucht ein Icon daneben ein leeres Alt.
• Text im Bild ohne Textalternative. Stehen die Worte sonst nirgends, muss das Alt sie enthalten.
• Ein Diagramm nur mit Slogan als Alt. Die Daten gehören auf die Seite.
• Bedeutungstragende Bilder als dekorativ markieren. Das ist eine Einschätzung des Kontexts, also prüfe sie, statt sie nur per Skript zu setzen.

Barrierefreie Bilder testen und überwachen

Automatisierte Barrierefreiheitstests finden ein fehlendes alt, können aber nicht beurteilen, ob der Text zutrifft, denn laut WAI-Tutorial entscheidet das der Autor. Kombiniere automatische Scans mit manueller Prüfung der Bilder, die Bedeutung tragen. LoadFocus Page Speed Monitoring führt geplante Lighthouse-Audits aus 25 Cloud-Regionen aus, die die Kategorie Barrierefreiheit (Accessibility) einschließen. Barrierefreie Bilder können auch schnelle Bilder sein, achte daher auf die Bildgröße. Mehr dazu in Warum Performance-Tests Barrierefreiheit einschließen müssen, Die besten Tools für Barrierefreiheitstests und Warum du die Bilder deiner Website verbessern solltest. Alle drei Beiträge sind auf Englisch. Das umfassendere Regelwerk steht in den WCAG.

Häufige Fragen: Barrierefreie Bilder

Was ist Alt-Text?

Alt-Text ist die Textalternative im alt-Attribut eines img-Elements. Screenreader, Braillezeilen und Browser mit abgeschalteten Bildern nutzen ihn anstelle des Bildes.

Braucht jedes Bild einen Alt-Text?

Jedes img braucht das alt-Attribut. Informative und funktionale Bilder brauchen einen aussagekräftigen Wert. Dekorative Bilder brauchen einen leeren, alt="", damit assistive Technologien sie überspringen.

Wie lang darf Alt-Text sein?

Kurz. Das WAI-Tutorial beschreibt informativen Alt-Text als kurze Phrase oder kurzen Satz. Braucht das Bild mehr, wie ein Diagramm, gehört die lange Beschreibung in den Seiteninhalt.

Wann nutze ich ein leeres Alt?

Wenn das Bild reine Dekoration ist, nur der Formatierung dient oder Text wiederholt, der direkt daneben steht. Sieh es als Entscheidung über den Kontext und nicht als Abkürzung.

Brauche ich aria-label an Bildern?

Meist nicht. Ein korrektes alt ist der Standardweg für img. ARIA hilft bei Verweisen auf lange Beschreibungen, etwa aria-describedby an einem komplexen Bild.

Wie beschreibe ich ein Diagramm?

Gib ihm ein kurzes Alt, das das Diagramm benennt, und setze die wesentlichen Daten als Text auf die Seite, zum Beispiel in eine Tabelle oder den umgebenden Absatz.