- 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
- Headers should have visible keyboard focus state
- All keyboard interactions relate to when headers are focused
- Each accordion header title is contained in an element with role button (e.g.
- Each accordion header button wrapped with role heading set to appropriate aria-level.
headingelements can be used.
- Only one
buttonelement is allowed in the
heading. Other visual elements must be outside the
- If the accordion panel is visible, the header button element should have aria-expanded set to true. If the panel is not visible,
aria-expandedis set to false.
- Accordion header buttons have aria-controls set to the ID of the associated accordion panel content.