Stellt sicher, dass jedes ARIA-Button-, Link- und Menüelement einen zugänglichen Namen hat
Blind
Sehbehindert
Mobilität
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
ARIA verlangt, dass alle Elemente erkennbaren Text haben, der den Zweck, die Funktion oder die Aktion einer Schaltfläche, eines Links oder eines Menüelements für Screenreader-Benutzer klar beschreibt.
Warum es wichtig ist
Screenreader können den Zweck von Links, Schaltflächen und Menüelementen nicht automatisch erkennen, wenn sie keinen zugänglichen Namen haben, was bestimmte Website-Benutzer isolieren kann.
Behebung des Problems
Überprüfen Sie, ob alle Elemente mit role=”link”, role=”button” oder role=”menuitem” einen klaren, zugänglichen Namen haben.
Gutes Codebeispiel
Codebeispiel
<div role="link" id="al" aria-label="Name"></div><div role="button" id="alb" aria-labelledby="labeldiv"></div><div role="menuitem" id="combo" aria-label="Aria Name">Name</div><div role="link" id="title" title="Titel"></div>
Kopieren Schlechtes Codebeispiel
Codebeispiel
<div role="link" id="empty"></div><div role="button" id="alempty" aria-label=""></div><div role="menuitem" id="albmissing" aria-labelledby="nonexistent"></div><div role="link" id="albempty" aria-labelledby="emptydiv"></div><div id="emptydiv"></div>
Kopieren Testfälle
Für weitere Beispiele besuchen Sie die ATC Rules-Bibliothek von W3C auf GitHub.