Disclosure and dialogs
Accessible disclosure controls: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
A disclosure reveals or hides a section in place. A native details/summary pair is useful for ordinary expandable content; a custom button-based disclosure needs an accurate expanded state and a reliable relationship to its panel.
A practical example
A shipping page hides optional packaging details below a clear summary. Expanding it leaves focus on the trigger, reveals the information in reading order and does not move the visitor to another page.
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.
Delivery details
This sample section can be opened and closed with the keyboard. Its content remains in the reading order while open.
How to check it
- Open and close the disclosure using keyboard and pointer input.
- Verify that the trigger's name and state match the visible panel.
- Check that hidden panel controls cannot receive focus and that the content remains readable at enlarged text sizes.
What can be missed
Do not place competing interactive controls inside the disclosure trigger. If content is essential to completing a task, make its availability clear instead of hiding it behind vague wording.
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.
<details>
<summary>Packaging and delivery details</summary>
<p>Orders ship in recyclable cardboard packaging.</p>
</details>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.