<img>Elemente müssen alternativen Text oder role=none bzw. role=presentation haben

WCAG verlangt, dass alle Bilder alternativen Text haben, um ihren Zweck und ihre Bedeutung für Benutzer zu vermitteln, die auf Screenreader angewiesen sind.

Warum es wichtig ist

Ohne alternativen Text können Screenreader ein Bild nicht beschreiben. Sehbehinderte Nutzer können den Inhalt von Bildern ohne Alt-Text nicht erfassen, was frustrierend sein kann.

Behebung des Problems

Jedes <img>-Element muss einen kurzen, beschreibenden Alt-Text haben. Dekorative Bilder müssen ein leeres alt-Attribut (alt=””) erhalten.

Es gibt drei Hauptmethoden, um alternativen Text zu einem Bild hinzuzufügen:

• Verwendung eines Alt-Attributs, z. B. <img alt=”Zeichnung einer Katze” src=”…”>
• Verwendung eines aria-label, z. B. <img aria-label=”Zeichnung einer Katze” src=”…”>
• Verwendung eines aria-labelledby-Attributs, z. B. <img aria-labelledby=”someID” src=”…”>

Alt-Text sollte den Zweck eines Bildes für einen Benutzer vermitteln, daher sollte er klar und nützlich sein. Für dekorative Bilder, die keinen alternativen Text erfordern, geben Sie „null“ Alt-Attribute an (verwenden Sie alt=””). Dies teilt Screenreadern mit, ein Bild zu ignorieren.

Gutes Code-Beispiel

Testfälle

Für weitere Beispiele besuchen Sie die ATC Rules-Bibliothek auf GitHub von W3C.