Disclosure and dialogs
Accessible modal dialogs: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
A modal dialog temporarily makes the rest of the page unavailable while the user completes a focused task. Use native dialog with showModal where suitable, supply a visible title and plan opening, closing and focus restoration.
A practical example
An audit planner opens a dialog to name a saved scope. Focus enters the dialog, background controls are unavailable, Escape or Cancel closes it, and focus returns to the button that opened it.
Try the example
Use Tab and your keyboard controls, then compare the behavior with the checks below. This is an isolated learning example; test the complete pattern in your own product and assistive technology setup.
How to check it
- Open the dialog by keyboard and check its name and initial focus.
- Cycle with Tab and Shift+Tab, checking that the background is inert and all dialog actions are reachable.
- Close through every supported route and verify logical focus restoration and preserved page state.
What can be missed
aria-modal does not itself block background interaction. Do not hide the dialog inside an aria-hidden ancestor or force a long structured description into a single announcement.
Markup and state contract
This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.
<dialog id="scope-dialog" aria-labelledby="scope-title">
<h2 id="scope-title">Name this audit scope</h2>
<form method="dialog">
<label>Scope name <input name="scope-name"></label>
<button value="cancel">Cancel</button>
<button value="save">Save</button>
</form>
</dialog>Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.