Accordion Example

The below example section contains a simple personal information input form divided into 3 sections that demonstrates the design pattern for accordion. In this implementation, one panel of the accordion is always expanded, and only one panel may be expanded at a time.

Example

Keyboard Support

Key Function
Space or Enter When focus is on the accordion header of a collapsed section, expands the section.
Tab
  • Moves focus to the next focusable element.
  • All focusable elements in the accordion are included in the page Tab sequence.
Shift + Tab
  • Moves focus to the previous focusable element.
  • All focusable elements in the accordion are included in the page Tab sequence.
Down Arrow
  • When focus is on an accordion header, moves focus to the next accordion header.
  • When focus is on last accordion header, moves focus to first accordion header.
Up Arrow
  • When focus is on an accordion header, moves focus to the previous accordion header.
  • When focus is on first accordion header, moves focus to last accordion header.
Home When focus is on an accordion header, moves focus to the first accordion header.
End When focus is on an accordion header, moves focus to the last accordion header.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
presentation dl
  • Indicates that the dl element is being used to control presentation and does not represent a definition list.
  • This implementation uses an HTML definition list where each term is recast as a header and each definition is recast as a region that contains panel content.
heading dt Identifies the element as a heading that serves as an accordion header.
aria-level=3 dt
  • Specifies heading level for the accordion header.
  • Level 3 is chosen because the accordion is contained in a section with a level 2 heading.
aria-expanded=true button Set to true when the Accordion panel is expanded, otherwise set to false.
aria-controls=ID button Points to the ID of the panel which the header controls.
aria-disabled=true button If the accordion panel is expanded and is not allowed to be collapsed, then set to true.
region dd Creates a landmark region that contains the currently expanded accordion panel.
aria-labelledby="ID_REF" dd
  • Points to the accordion header.
  • Labels the landmark region with the accordion header.

Javascript and CSS Source Code

HTML Source Code