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.
Space or Enter When focus is on the accordion header of a collapsed section, expands the section.
Role, Property, State, and Tabindex Attributes
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.
Identifies the element as a heading that serves as an accordion header.
Specifies heading level for the accordion header.
Level 3 is chosen because the accordion is contained in a section with a level 2 heading.
Identifies the element as a button inside the accordion header that provides hide/show functionality.
true when the Accordion panel is expanded, otherwise set to
Points to the ID of the panel which the header controls.
If the accordion panel is expanded and is not allowed to be collapsed, then set to
Creates a landmark region that contains the currently expanded accordion panel.
Points to the accordion header.
Labels the landmark region with the accordion header.
Accordion Design Pattern in WAI-ARIA Authoring Practices 1.1