Ensure Every ARIA Dialog and alertdialog Node Has an Accessible Name
Blind
Hearing
Mobility
WCAG 2.2 Level A
Aria dialog elements must have clear text that describes the destination, purpose, function, or action to screen reader users.
Why It Matters
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.
Fixing the Issue
Checks all elements with role=”dialog” or role=”alertdialog” to ensure that they have a discernable, accessible name.
Good Code Example
Code example
<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 Bad Code Example
Code example
<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