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.

Example

Name:

Email:

Phone:

Extension:

Country:

City/Province:

Accessibility Features

The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions. When an accordion header button has keyboard focus, the styling of the accordion container and all its header buttons is changed.

When any accordion header button receives focus:

The border encompassing the entire accordion changes color.
The background color of the accordion header buttons changes.

The focused accordion header button:

Has a border that encompasses both the header text and icon.
Has a background color that distinguishes it from the other accordion buttons that are not focused.

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.
`Down Arrow`	When focus is on an accordion header, moves focus to the next accordion header. When focus is on last accordion header, moves focus to first accordion header.
`Up Arrow`	When focus is on an accordion header, moves focus to the previous accordion header. When focus is on first accordion header, moves focus to last accordion header.
`Home`	When focus is on an accordion header, moves focus to the first accordion header.
`End`	When focus is on an accordion header, moves focus to the last accordion header.

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 accordion panel is expanded and is not allowed to be collapsed, then set to `true`.
`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

CSS: accordion.css
JavaScript: accordion.js

Accordion Example

Example

Personal Information

Billing Address

Shipping Address

Accessibility Features

Keyboard Support

Role, Property, State, and Tabindex Attributes

Javascript and CSS Source Code

HTML Source Code