APG · Disclosure and Accordion
Disclosure & accordion
The simplest pattern in the guide, and still usually wrong — because the mistakes are in the markup, not the JavaScript.
Disclosure
Three projects, 1 GB of storage, and community support.
Yes, at any point. Changes are prorated to the day.
Accordion
Each header is a real <h3> wrapping a
<button>. That is the whole point: screen reader users
navigate long pages by pulling up a list of headings, and an accordion
whose sections are not headings is invisible to that workflow.
Dispatched within one working day. Tracked delivery in 2–4 days.
Thirty days, unworn, in the original packaging. Return postage is on us.
Two years against manufacturing defects.
Single-select, one always open
Visa, Mastercard, Amex.
Two to three working days to clear.
aria-disabled, not disabled — so it
still receives focus and still announces its state. A disabled
button would drop out of the tab order, and the user would find the one
section they are reading mysteriously unreachable.
| Tab | Move to the next header or into the open panel's content. |
|---|---|
| Enter or Space | Toggle the header's section. Native button behaviour — no extra key handler. |
| ↓ / ↑ | Accordion only: move to the next / previous header, wrapping at both ends. |
| Home / End | Accordion only: move to the first / last header. |