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. This example does not implement any of the optional keystrokes included in the accordion pattern.


Keyboard Support

Key Function
Space or Enter When focus is on the accordion header of a collapsed section, expands the section.

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.
button a Identifies the element as a button inside the accordion header that provides hide/show functionality.
aria-expanded=true a Set to true when the Accordion panel is expanded, otherwise set to false.
aria-controls=ID a Points to the ID of the panel which the header controls.
aria-disabled=true a 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