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:
: Address 1:

Address 2:

City:

State:

Zip Code:
: Address 1:

Address 2:

City:

State:

Zip Code:

Keyboard Support

Key	Function
`Space` or `Enter`	When focus is on the accordion header of a collapsed section, expands the section.
`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.
`Control + Page Down`	When focus is inside an accordion panel or on an accordion header, moves focus to the next accordion header. When focus is on last accordion header or inside last accordion panel, moves focus to first accordion header.
`Control + Page Up`	When focus is inside an accordion panel, moves focus to the header for that panel. 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.

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.
	`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		`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

CSS:
1. accordion.css
JavaScript:
1. accordion.js

Accordion Example

Example

Keyboard Support

Role, Property, State, and Tabindex Attributes

Javascript and CSS Source Code

HTML Source Code