Disclosure and dialogs
Accessible accordions: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
An accordion organizes related expandable sections. Each section needs a descriptive heading and a keyboard-operable trigger whose expanded state matches its panel. Choose deliberately whether several sections may remain open.
A practical example
A policy page groups Returns, Delivery and Repairs. Visitors can expand the relevant section, compare two sections and reach links inside open panels without traversing controls in collapsed ones.
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.
Returns information
This sample section can be opened and closed with the keyboard. Its content remains in the reading order while open.
Contact options
This sample section can be opened and closed with the keyboard. Its content remains in the reading order while open.
This example uses independent native disclosures. A custom ARIA accordion has additional heading and state requirements described in the source.
How to check it
- Use Tab to reach each header and Enter or Space to open it.
- Verify heading levels, expanded states and trigger-to-panel relationships.
- Move through the open panel's controls, collapse it and confirm that hidden content leaves the focus order.
What can be missed
An accordion is not a tablist. Arrow-key shortcuts can be an optional enhancement, but they do not replace normal Tab access or the Enter/Space activation contract.
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.
<h3><button type="button" aria-expanded="false" aria-controls="returns-panel">Returns</button></h3>
<div id="returns-panel" hidden>
<p>Start a return within the stated return period.</p>
</div>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.