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
Foto des Experten
Ritvik Shrivastava
Fachmännisch überprüft von
Kommentare: 0
Ihre gesamte Domain
Erhalten Sie detaillierte Anweisungen, wie Sie jedes Barrierefreiheitsproblem auf Ihrer Website beheben können

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.