Names, roles & states

A Dialog Has No Name

When a pop-up dialog opens, screen reader users hear just "dialog". They don't hear what it's for, so they must explore it to find out.

aria-dialog-nameBest practiceBest practice — not a WCAG requirement, but it helps people all the same.

Status: SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
Owner: DesignDevContentTest
Audit: Automated+ManualA scanner finds it; a person confirms the fix.

Why it matters

A dialog is a box that opens over the page, such as a sign-in form or a "Delete this?" check. When it opens, a screen reader reads out its name, so people know what they've landed in.

With no name, they hear only "dialog". They must hunt through it to work out what it wants, and they may act without knowing the stakes.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Screen reader users	They hear "dialog" with no title, so they don't know what opened or why.	High impact
Low-vision users (magnification)	Those using a screen reader with magnification lose the title that tells them where they are.	Partial impact
Cognitive and neurodivergent users	Affected if they use text-to-speech, which also misses the title.	Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
Area	Why	Impact
Legal	This is a best practice, not a WCAG 2.2 requirement on its own. Unnamed dialogs often travel with other faults that do fail WCAG, so audits under Australia's Disability Discrimination Act will flag them.	Moderate impact
Conversion	Sign-in, checkout and confirm dialogs that people can't identify lead to abandoned tasks.	Moderate impact
SEO	No search benefit — search engines don't read dialog names.	Low impact
Brand trust	A confusing pop-up feels careless to people who rely on screen readers.	Moderate impact
Cost to fix	Usually one attribute. Fix it once in the shared dialog component.	High impact

Fixing it in code

Name a dialog from its visible heading

Don't

<div role="dialog" aria-modal="true">
  <h2>Sign in</h2>
  …
</div>

A screen reader says: “Dialog”

<div role="dialog" aria-modal="true" aria-labelledby="signin-title">
  <h2 id="signin-title">Sign in</h2>
  …
</div>

A screen reader says: “Sign in, dialog”

aria-labelledby points to the heading, so its text becomes the dialog's name.

Name an alert dialog with no visible title

Don't

<div role="alertdialog">
  <p>This can't be undone.</p>
  <button>Delete</button>
</div>

A screen reader says: “Alert dialog”

<div role="alertdialog" aria-label="Delete file?">
  <p>This can't be undone.</p>
  <button>Delete</button>
</div>

A screen reader says: “Delete file?, alert dialog”

aria-label gives a name when there's no heading to point to.

Designer's handoff note

Give every dialog a short visible title that says what it's for, like "Sign in" or "Delete file?".

Note in the design file which text is the dialog's name.

Quick test

Tool

NVDA (opens in a new tab) (free on Windows) or VoiceOver (opens in a new tab) (on every Mac)

Checklist

Step 1: Turn on your screen reader.
Step 2: Use the keyboard to open a dialog or pop-up.
Step 3: Listen to the first thing announced.

Pass: You hear a clear title, then "dialog", like "Sign in, dialog".
Fail: You hear only "dialog", or a name that doesn't say what it's for.

Check these at the same time

An ARIA attribute is used where it isn't allowed aria-allowed-attr

What a green scan still misses

A scanner checks that a name exists. It can't tell if the name is clear or matches the visible title — for that, listen.

Reference

Rule ID: aria-dialog-name
Raised by: axe-core: “ARIA dialog and alertdialog nodes should have an accessible name”
WCAG: Best practice — not a WCAG requirement
Read more: Deque University: aria-dialog-name (opens in a new tab)
Last reviewed: 14 October 2026