Accordion Example

The below example section contains a simple personal information input form divided into 3 sections that demonstrates the design pattern for accordion.

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.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
h3
  • Element that serves as an accordion header.
  • Each accordion header element contains a button that controls the visibility of its content panel.
  • The example uses heading level 3 so it fits correctly within the outline of the page; the example is contained in a section titled 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.
region div Creates a landmark region that contains the currently expanded accordion panel.
aria-labelledby="IDREF" div
  • Defines the accessible name for the region element.
  • References the accordion header button that expands and collapses the region.
  • region elements are required to have an accessible name to be identified as a landmark.

Javascript and CSS Source Code

HTML Source Code