Displays a condensed list of content with specific titles and descriptions grouped together. All accordion panels are closed by default - expanding when the user clicks one of the accordion section titles.
- An accordion can be expanded or collapsed by clicking the entire header area or plus/minus icon.
- Users may have multiple accordions open at once.
Accordions deliver large amounts of content in a small space through progressive disclosure, and work especially well whenever vertical space is at premium. All accordion panels are closed by default – expanding when the user clicks one of the accordion section titles.
This accordion comes with a configuration attribute,
data-accordion-config-single that enables you to decide whether you want the accordion panel siblings to close or remain opened when selecting another panel. The example above is set to
- Each accordion header title is contained in an element with
- 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.
- Headers should have visible keyboard focus state
- All keyboard interactions relate to when headers are focused
Tab = Move to next focusable element
Space = Expand/Collapse Panel
Shift + Tab = Move to previous focusable element
↓ = Cycle headers when header focused
Control + Option
→ = Navigate through accordion content with screen reader
Screen Reader Expectations
When interacting with accordions, screen readers should announce the following information:
- Button (or other actionable element)
- Current state of Button - expanded or collapsed
- Panel content will be read if navigated to
Tab Order Expectations
When navigating through an accordion, the following tab order is expected:
- The next tab keypress will advance to the next Header text.
- When expanded and focused, all focusable elements inside the Accordion Panel are included in the tab order.