Accordion headers should sit inside a heading
Rule
accordion-heading-structure· Component patterns (best practice) · impact minor · Static + live
Why it matters
The accordion pattern wraps each expand/collapse button in a heading (h2–h6) so screen-reader users can jump between sections with heading navigation. When the triggers are bare buttons with no heading, that structure is lost. Only flagged when several disclosure triggers each control a region (a real accordion).
How to fix
Wrap each accordion trigger button in a heading element (
) at the appropriate level, or set role="heading" + aria-level on the existing wrapper around each trigger.
Example
<div><button aria-expanded="false" aria-controls="p1">Section 1</button><div id="p1" role="region">One</div><button aria-expanded="false" aria-controls="p2">Section 2</button><div id="p2" role="region">Two</div></div>
<div><h3><button aria-expanded="false" aria-controls="p1">Section 1</button></h3><div id="p1" role="region">One</div><h3><button aria-expanded="false" aria-controls="p2">Section 2</button></h3><div id="p2" role="region">Two</div></div>
WCAG success criteria
1.3.1 Info and Relationships — Level A
Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.
Standards
This rule contributes to the following standards:
WCAG A EN 301 549
| Standard | Criteria |
|---|---|
| EN 301 549 | 9.1.3.1 |