Textalternativen

Bilder brauchen einen Alternativtext

Regel: image-alt
Schweregrad: Kritisch
WCAG-Stufe A

Warum das wichtig ist

Ohne alt-Attribut greift ein Screenreader auf den Dateinamen zurück: „hero-2024-final-v3.jpg“. Was das Bild vermitteln sollte, ist verloren.

So beheben Sie es

Beschreiben Sie, was das Bild in diesem Zusammenhang vermittelt, nicht was allgemein darauf zu sehen ist.
Geben Sie dekorativen Bildern alt="", damit sie übersprungen statt angesagt werden.
Steht das Bild in einem Link, muss der Alternativtext sagen, wohin der Link führt.
Beginnen Sie nicht mit „Bild von“ — die Rolle wird ohnehin angesagt.

Im Markup

Fehlerhaft

<img src="team.jpg">

Korrekt

<img src="team.jpg" alt="The support team in the Berlin office">
<img src="divider.svg" alt="">

Was die Prüfung nicht beurteilen kann

Die Prüfung sieht, ob alt vorhanden ist, nicht ob es nützt. „bild1“, „foto“ und ein wiederholter Dateiname bestehen sie alle — und scheitern alle beim Lesenden.

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

1.1.1 Nicht-Text-Inhalte (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu image-alt (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.