Accordion

Diagram of the different cuts of a pig
Component Name

Accordion

Keyboard Expectations
  • Enter or Space = Expands/Collapses Panel
  • Tab = Move to next focusable element
  • Shift + Tab = Move to previous focusable element
  • ↑ ↓ = Cycle headers when header focused
  • Home (Optional) = Focus first header
  • End (Optional) = Focus last header
Focus Expectations
  • Headers should have visible keyboard focus state
  • All keyboard interactions relate to when headers are focused
Labelling Expectations
  • Each accordion header title is contained in an element with role button (e.g. <button>).
  • Each accordion header button wrapped with role heading set to appropriate aria-level.
    • HTML heading elements can be used.
    • Only one button element is allowed in the heading. Other visual elements must be outside the heading element.
  • If the accordion panel is visible, the header button element should have aria-expanded set to true. If the panel is not visible, aria-expanded is set to false.
  • Accordion header buttons have aria-controls set to the ID of the associated accordion panel content.