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="modal-overlay">
  <div class="modal-box">
    <h2>Edit task</h2>
    <input type="text" value="Design homepage mockup">
    <button onclick="closeModal()">Save</button>
  </div>
</div>
<!-- no role="dialog", no aria-modal, and no aria-labelledby pointing at the h2 -->

Why it matters

A screen reader user does not realize a dialog opened over the board and may keep tabbing through cards behind it.

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

Also trap focus inside the dialog and return it to the triggering card when it closes.

<div class="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true" aria-labelledby="editTaskTitle">
    <h2 id="editTaskTitle">Edit task</h2>
    <input type="text" value="Design homepage mockup">
    <button onclick="closeModal()">Save</button>
  </div>
</div>

Outcome

A project manager hears "Edit task dialog" and edits the card without losing their place on the board.

Who is affected

Screen reader users editing a task cannot tell they are now inside a modal separate from the board.

Learn more

Understanding Understanding document (opens in a new tab)