Accordion
A pattern for collapsing and expanding content by section
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsButton role on headers
Each section heading must use role="button" or a <button> element.
aria-expanded on each header button
aria-expanded="true" when the panel is open, aria-expanded="false" when closed.
Header button references its panel
Each header button must reference its panel id via aria-controls.
Toggle panel with Enter/Space
Panels must be toggled open and closed with Enter or Space.
Wrap button in a heading element
Place buttons inside an appropriate h2–h6 heading to maintain document structure.
Arrow key navigation between headers
Down arrow moves to the next header, up arrow moves to the previous header.
Home/End to first/last header
Home navigates to the first header, End navigates to the last header.
Do not use button without a heading
Using a button without a heading wrapper prevents screen readers from navigating the document structure.
Do not force single-expand without notice
If auto-closing other panels, clearly communicate this behavior to users.
Additional checks
Connect AccordionSummary to a heading
Wrap AccordionSummary in an h3 or similar heading to preserve document structure.
Code sample
Implementation notes
- –MUI Accordion automatically handles aria-expanded.
- –Use disableGutters and square props to adjust styling.