A dialog must have an accessible name
Rule
dialog-name· Component patterns (best practice) · impact serious · Static + live
Why it matters
A dialog is announced by its accessible name when it opens. Text content does not provide that name, so a dialog without aria-labelledby/aria-label opens as an unnamed group.
How to fix
On the element that carries role="dialog" / role="alertdialog" (or the <dialog> element), add aria-labelledby with the id of the dialog’s heading, or aria-label when there is no visible title; a title attribute also works as a last resort. A heading inside the dialog is not enough on its own — dialogs are not named from their content — and the name has to be on the dialog element, not on the overlay around it.
Example
<div role="dialog"><h2>Settings</h2></div>
<div role="dialog" aria-labelledby="dt"><h2 id="dt">Settings</h2></div>
WCAG success criteria
4.1.2 Name, Role, Value — Level A
Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.
Standards
This rule contributes to the following standards:
WCAG A EN 301 549 Best practice
| Standard | Criteria |
|---|---|
| EN 301 549 | 9.4.1.2 |