Accessible component patterns

Accordion

Expandable sections built on the native details and summary elements, with an “only one open at a time” mode and animated opening.

Component
<ad-accordion>
APG pattern
Accordion
WCAG criteria
  • 1.3.1 Info and Relationships
  • 2.1.1 Keyboard
  • 2.3.3 Animation from Interactions
  • 2.4.7 Focus Visible
  • 2.5.8 Target Size (Minimum)
  • 4.1.2 Name, Role, Value

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.

The enhancement adds three things: an “only one open at a time” mode (again native, via the name attribute, so the browser itself closes the other items), arrow-key movement between items, and a smooth opening animation that is pure CSS and respects the reduced-motion setting.

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 closes on its own.

Screen reader

  • A heading is announced as “collapsed” or “expanded”, and the state changes on activation without any further announcement.

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.

Without JavaScript

Everything works: items open and close natively. Only the “only one open at a time” mode and the arrow-key movement are missing.

Code to copy

<ad-accordion exclusive data-expand-all="Expand all" data-collapse-all="Collapse all">
  <details>
    <summary>Is one accessibility statement enough for a whole organisation?</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>