Bilder tragen wichtige Informationen oder dekorative Inhalte auf einer Website. Alternative Texte machen diese Inhalte für Screenreader zugänglich, sodass Nutzer:innen, die Bilder nicht sehen können, denselben Kontext erhalten.
Was muss beachtet werden?
Deutsches Gesetz: Anforderungen der Konformitätsstufe A und AA müssen umgesetzt werden.
A
AA
Hohe Priorität
Da Bilder nur visuell wahrgenommen werden können, müssen sie einen alternativen Text bereit stellen.
Konformitätsstufe A
Je nach Zweck des Bildes gibt es unterschiedliche Anforderungen an den alternativen Text eines Bildes.
Informativ: mind. eine kurze Beschreibung aller wichtigen Informationen
Dekorativ: Gar keine Textalternative: leeres alt-Attribut
Bilder von oder mit Text: mind. eine vollständige Textalternative aller Daten;
<!-- ✅ Correct: text is meaningful -->
<img
src="/my-cat.webp"
alt="An orange cat sitting on the floor, looking through the window and watching a bird fly by."
>
<!-- ✅ Correct: image is hidden and it's just decorative -->
<img src="/black-background.webp" alt="">
Code-Beispiele mit korrekter Anwendung von alt-Attributen
<!-- ❌ Incorrect: missing alt-Attribute -->
<img src="/my-cat.webp">
<!-- ❌ Incorrect: alt not meaningful enough-->
<img src="/my-cat.webp" alt="An orange cat.">
<!-- ❌ Incorrect: image is hidden for the accessibility tree, but it's not decorative -->
<img src="/my-cat.webp" alt="">
Code-Beispiel mit fehlender oder inkorrekter Anwendung von alt-Attributen
Konformitätsstufe AA
Bilder, die Text zeigen, sind nicht erlaubt, solange man den Text (z.B. die Schriftgröße) nicht anpassen kann.
Bilder und Grafiken können auch anders eingebunden werden z.B. inline als SVG, per object-Tag oder als Hintergrundbild.
Konformitätsstufe A
Alle Bilder, die per CSS eingebunden sind, müssen rein dekorativ sein und sollten keinen alternativen Text eingebunden haben.
Bei SVG’s kann die Textalternative entweder per <title> Attribute oder per ARIA-Attribute (aria-label, aria-labelledby) gesetzt werden. Rein dekorative SVG’s sollten per aria-hidden versteckt werden.
<!-- ✅ Correct: icon is hidden with aria-hidden="true" because it is just decorative -->
<svg aria-hidden="true">
<use xlink:href="#icon-photo"></use>
</svg>
<!-- ✅ Correct: alternative text provided with a title -->
<svg>
<title>Graph shows the mathematical function for f(x) = x + 3 </title>
<use xlink:href="#graph-for-a-mathematical-function"></use>
</svg>
<!-- ✅ Correct: alternative text provided with aria-labelledby -->
<h2 id="headline">Graph with shows the mathematical function for f(x) = x + 3 </h2>
<svg aria-labelledby="headline">
<use xlink:href="#graph-for-a-mathematical-function"></use>
</svg>
Code-Beispiele für korrekte Implementierung von alternativen Texten für SVG's
Graph with shows the mathematical function for f(x) = x + 3
<!-- ❌ Incorrect: missing alternative text -->
<svg>
<use xlink:href="#icon-photo"></use>
</svg>
Code-Beispiel für einen fehlenden alternativen Text
Konformitätsstufe AA
Bilder, die Text zeigen, sind nicht erlaubt, solange man den Text (z.B. die Schriftgröße) nicht anpassen kann.
