• Success Criterion 4.1.2
  • Conformance level A

Modal Dialog With No Role or Accessible Name Set

4.1.2 — Name, Role, Value

Scenario

Setting

A project-management tool's task board

What’s wrong

Modal dialogs without role="dialog"/aria-modal (code marking a blocking dialog) and accessible name.

Example

Watch a project-management tool's task board closely and you'll spot this: modal dialogs without role="dialog"/aria-modal (code marking a blocking dialog) and accessible name.

Why it matters

Screen-reader and voice-control users who can operate only what the accessibility tree exposes. On a project-management tool's task board, this barrier means they hit a dead end with no way forward.

How to test

Open a modal dialog and inspect DevTools: check for role="dialog", aria-modal="true", and an accessible name (aria-labelledby) — any missing fails.

How to fix

Use role='dialog' with aria-modal (code marking a blocking dialog) and an accessible name (aria-labelledby (code pointing to the element that names it) the title).

Outcome

Corrected, a project-management tool's task board now lets a visitor complete the task without extra help.

Who is affected

Screen-reader and voice-control users who can operate only what the accessibility tree exposes.

Learn more

Related scenarios