Writing Accessible Accordion Header Labels
Writing Accessible Accordion Header Labels records the section-title function specific to accordions rather than repeating generic button-label advice.
Use a concise section title for each accordion header so the control clearly represents the content it expands or collapses.
Key details
Important caveats
Scope Boundary
This page covers accordion-header/title wording; heading levels, aria-expanded, aria-controls, and panel-region decisions remain implementation concerns.
Further guidance
Content
Write each accordion header as a clear section title that tells users what content the control reveals or hides.
Purpose
Descriptive accordion headers let users scan the collapsed structure and choose the section they want before expanding it.
Sources and evidence
Sources are shown with the role they play in this guide. Historical or style-sensitive claims are kept within the evidence boundary described above.
- Accordion Pattern — WAI-ARIA Authoring Practices Guide (opens in a new tab)World Wide Web Consortium (W3C) · W3C APG guidance that an accordion header contains a title representing its section and functions as the disclosure control.