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