Jeder ARIA-dialog- und alertdialog-Knoten muss einen zugänglichen Namen haben
Blind
Hören
Mobilität
WCAG 2.2 Level A
ARIA-Dialogelemente müssen klaren Text enthalten, der das Ziel, den Zweck, die Funktion oder die Aktion für Screenreader-Benutzer beschreibt.
Warum es wichtig ist
Screenreader-Benutzer können den Zweck von Elementen mit role=”dialog” oder role=”alertdialog” nicht verstehen, wenn diese keinen zugänglichen Namen haben.
Behebung des Problems
Alle Elemente mit role=”dialog” oder role=”alertdialog” müssen überprüft werden, um sicherzustellen, dass sie einen erkennbaren und zugänglichen Namen haben.
Gutes Codebeispiel
Codebeispiel
<div role="dialog" id="alb" aria-labelledby="labeldiv"></div><div role="alertdialog" id="combo" aria-label="Aria Name">Name</div><div role="dialog" id="title" title="Title"></div>
Kopieren Schlechtes Codebeispiel
Codebeispiel
<div role="dialog" id="empty"></div><div role="alertdialog" id="alempty" aria-label=""></div><div role="dialog" id="albmissing" aria-labelledby="nonexistent"></div><div role="dialog" id="albempty" aria-labelledby="emptydiv"></div><div id="emptydiv"></div>
Kopieren