What does aria-modal="true" actually do?

It tells assistive technologies that everything outside the dialog is inert while the dialog is open. Screen readers then restrict navigation to the dialog's contents, mirroring the visual modal overlay.

Should I use role="dialog" or role="alertdialog"?

Use role="dialog" for most modals. Use role="alertdialog" only for urgent, interruptive messages that require an immediate response, such as a destructive-action confirmation or an error that blocks progress.

How do I give the dialog an accessible name?

Point aria-labelledby at the id of the visible heading inside the dialog, or set aria-label directly. The checker resolves aria-labelledby ids against the snippet and fails if they are missing or empty.

Does this tool test focus trapping?

No. It checks the static ARIA structure only. Focus management, initial focus, focus return on close, and Escape-to-dismiss are runtime behaviours you must verify with a keyboard and a screen reader.

Is my HTML uploaded anywhere?

No. The snippet is parsed locally with the browser's built-in DOMParser. Nothing is sent to a server, so it is safe to paste internal or unreleased markup.

Modal Dialog ARIA Pattern Checker

A modal dialog is one of the easiest components to ship with broken accessibility. Sighted mouse users see a clean overlay, while screen reader users get a dialog with no name, no modal semantics, or a close button announced only as “button”. This checker parses a pasted snippet and reports, attribute by attribute, whether it matches the WAI-ARIA Authoring Practices dialog pattern.

How it works

The tool parses your HTML locally with the browser’s DOMParser, then runs five checks against the container that carries role="dialog", role="alertdialog", or a native <dialog> element:

Dialog role — confirms a dialog container exists.
aria-modal="true" — confirms the modal flag is set so the rest of the page is treated as inert.
Accessible name — resolves aria-labelledby against the ids in the snippet (or accepts aria-label) and confirms the referenced heading actually has text.
aria-describedby — optional; flagged as a recommendation when absent, validated when present.
Close control — searches buttons and links inside the dialog for a close-like control that has an accessible name (visible text, aria-label, title, or a resolved aria-labelledby).

Each check returns PASS, FAIL, or WARN with a short explanation of exactly what was found.

Example and notes

A conformant skeleton looks like this:

<div role="dialog" aria-modal="true"
     aria-labelledby="dlg-title" aria-describedby="dlg-desc">
  <h2 id="dlg-title">Delete project?</h2>
  <p id="dlg-desc">This permanently removes the project.</p>
  <button type="button">Cancel</button>
  <button type="button">Delete</button>
  <button type="button" aria-label="Close dialog">&times;</button>
</div>

Two common failures the checker catches: an aria-labelledby that points to an id not present in the snippet, and a × close button with no aria-label, which a screen reader announces as just “button”. Remember that passing the static structure is necessary but not sufficient — always pair it with a real keyboard and screen reader pass for focus trapping and Escape handling.

Modal Dialog ARIA Pattern Checker

Verify your modal dialog against the WAI-ARIA dialog pattern

How it works

Example and notes