Ensure Every ARIA Dialog and alertdialog Node Has an Accessible Name
Blind
Hearing
Mobility
WCAG 2.1 Level A
Aria dialog elements must have clear text that describes the destination, purpose, function, or action to screen reader users.
Screen reader users will not be able to understand the purpose of elements with role=”dialog” or role=”alertdialog” if they don’t have an accessible name.
Checks all elements with role=”dialog” or role=”alertdialog” to ensure that they have a discernable, accessible name.
<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>
Copy
<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>
Copy