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

<div class="checkbox" onclick="toggle()"></div>

Why it matters

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

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).

<input type="checkbox" id="opt-1">

<label for="opt-1">Email notifications</label>

A native input exposes its role and checked state automatically; a styled div exposes none of that without a lot of manual ARIA.

Outcome

On a project-management tool's task board, this barrier is gone for screen-reader and voice-control users who can operate only what the accessibility tree exposes — they can finish what they came here to do.

Who is affected