Skip to content

Accordion Example

Accordion Example

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

About This Example

The below example section contains a simple personal information input form divided into 3 sections that demonstrates the Accordion Pattern.

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

To copy the following HTML code, please open it in CodePen.

Back to Top