Layout

Accordion

How the Accordion works with a keyboard and assistive tech.

Guidance#

Each header is a native <button> inside a heading, reachable by Tab and toggled with Enter or Space.

The button has aria-expanded and aria-controls pointing at its panel, a region labelled by the header.

A closed panel is inert, so nothing inside it can be reached until it opens.

The toggle glyph is decorative; the state comes from aria-expanded.