Accordion

Expandable sections built on the native details and summary elements, with headings in the summaries, arrow-key movement and animated opening. Every item expands when printed.

Component
<ad-accordion>
APG pattern
Accordion
Selected WCAG criteria

A component must meet every WCAG criterion; listed here are the ones most often broken with it.

Demo

Is one accessibility statement enough for a whole organisation?

No. A statement covers a specific website or mobile application, so there are usually several.

Why not rely on automated tools alone?

Automated checks find roughly 20 to 30 % of problems. The rest needs a person: whether alternative texts make sense, whether focus order is logical, whether error messages are understandable.

How long does an accessibility evaluation take?

It depends on scope: an indicative review takes a few days, an in-depth evaluation of a website with dozens of pages two to four weeks.

Why it is accessible

The best ARIA is no ARIA. This accordion is built from the native details and summary elements, to which the browser itself gives a role, a name and an “expanded / collapsed” state. None of that can be broken by a script that fails to load. Each item's header is also a heading (an h3 inside the summary), much like the GOV.UK accordion, so it appears in a screen reader's headings list and the page keeps a continuous outline.

Items do not close on their own. Whatever you open stays open until you close it, so you can compare two answers side by side. The enhancement adds arrow-key movement between items, an “Expand all” button that reads “Collapse all” once every item is open, and a smooth opening animation that is pure CSS and respects the reduced-motion setting. When printed, every item expands, so nothing is missing on paper.

Test it yourself

Keyboard

  • Tab to an item's heading; Enter or Space opens it.
  • ↓ and ↑ move focus between headings; Home and End go to the first and last.
  • Open the second item: the first one stays open.

Screen reader

  • The header is announced as a level 3 heading and a control with a state. NVDA says, for example, “collapsed” or “expanded”; the exact wording depends on the screen reader, browser and language.
  • The state changes on activation without any further announcement.
  • Safari with VoiceOver has long ignored the heading inside summary. The items stay fully operable there; they just do not appear in the headings list.

Zoom and reflow

  • Headings are at least 44px tall, so they are a comfortable target on a touchscreen too.
  • The content has no fixed height; it simply grows taller when you zoom in.

Print

  • Open the print preview (Ctrl + P): every item is expanded and no content is cut off.

Without JavaScript

Everything works: items open and close natively. Only the arrow keys and the bulk button are missing. Expansion when printing is handled by CSS alone in browsers that support ::details-content; elsewhere the script takes care of it.

Code to copy

<ad-accordion data-expand-all="Expand all" data-collapse-all="Collapse all">
  <details>
    <summary><h3>Is one accessibility statement enough for a whole organisation?</h3></summary>
    <div><p>…</p></div>
  </details>
  <details>…</details>
</ad-accordion>
<link rel="stylesheet" href="/assets/js/components/ad-accordion/ad-accordion.css">
<script type="module" src="/assets/js/components/ad-accordion/ad-accordion.js"></script>

An “only one open at a time” mode is available through the exclusive attribute, but we advise against it: people find it disruptive when content closes on its own.