[role=img] Elemente müssen Alternativtext haben
Blind
Hören
WCAG 2.2 Level A
Von Menschen für Menschen geschrieben und recherchiert
Casandra Visser
Autor
Yotam Flohr
Forscher
Ritvik Shrivastava
Fachmännisch überprüft von
Kommentare:
0
Laut Web-Accessibility-Standards müssen alle Elemente mit role=”img” einen Alternativtext haben.
Warum es wichtig ist
Ohne Alternativtext können Screenreader ein Bild nicht für die Nutzer verständlich machen. Daher sollten Bilder stets einen kurzen, beschreibenden und zugänglichen Alternativtext enthalten.
Menschen mit Sehbehinderungen oder Farbenblindheit sind in unterschiedlichem Maße auf zugänglichen Alternativtext angewiesen.
Screenreader können visuelle Inhalte nicht in Sprache oder Braille umwandeln, wenn kein Alternativtext vorhanden ist.
Behebung des Problems
Alle Elemente mit role=”img” müssen mit einem Alternativtext versehen werden.
Gutes Codebeispiel
Codebeispiel
<div id="match">Bananen</div>
<div role="img" aria-labelledby="match" id="pass2"></div><div id="hidden-match" style="display:none">Bananenbomben</div>
<div role="img" aria-labelledby="hidden-match" id="pass3"></div><div role="img" aria-label="Beispiel" id="pass1"></div><div role="img" title="Titel" id="pass4"></div>
Kopieren Schlechtes Codebeispiel
Codebeispiel
<div role="img" id="violation1"></div><div role="img" aria-label="" id="violation2"></div><div role="img" alt="Beispiel" id="violation3"></div><div role="img" aria-labelledby="no-match" id="violation4"></div><div role="img" title="" id="violation5"></div>
Kopieren Testfälle
Für weitere Beispiele besuchen Sie die ACT Rules Library der W3C auf GitHub.