Accordion Group Example

The below example section contains a form divided into three steps, each in an accordion. The form has one step open at a time, and demonstrates a behavioral variation of the design pattern for accordions.

Similar examples include:

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.
aria-disabled="true" button If the open panel cannot be closed, set aria-disabled to true when the Accordion panel is expanded.
group (Optional) div Creates a form group that contains the fields in the open 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