A dialog must have an accessible name

Rule dialog-name · Component patterns (best practice) · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

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#

Add aria-labelledby pointing to the dialog title, or aria-label, to every role="dialog" / role="alertdialog".

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.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• APG — Dialog (Modal)