Accordion Example

The below example section contains a simple personal information input form divided into 3 sections that demonstrates the design pattern for accordion.

Similar examples include:

Example

Dr. Jim Thatcher received his PhD from the University of Michigan in 1963, one of the first PhD's in Computer Science. Together with his thesis advisor, Dr. Jesse Wright, Jim then joined the Mathematical Sciences Department of IBM Research, where he stayed until 1996.

His research area was mathematical computer science, including automata theory, semantics, and data abstraction. Jim began moving away from the abstract and toward the practical when he and Dr. Wright, who is blind, started working on an "audio access system" for the IBM Personal Computer, a system for providing on-screen information to a blind user through synthesized voice.

This work culminated in the development of one of the first screen readers for DOS in 1984-85, called IBM Screen Reader. (Such access systems are now known as "screen readers"!) He later led the development of IBM Screen Reader/2, the first screen reader for a graphical user interface on the PC. Jim was intimately involved in the development of IBM Home Page Reader, a talking web browser for the blind and visually impaired.

In 1996 Dr. Thatcher joined the IBM Accessibility Center in Austin, TX, where he led the effort to include accessibility in the IBM development process. A key part of that effort was the establishment of the IBM Accessibility Guidelines specifically for use within IBM's development community.

Jim served as Vice-Chair of the Electronic and Information Technology Access Advisory Committee (EITAAC) which was empanelled by the Access Board to propose standards for Section 508; he chaired the subcommittee on software standards. Later he wrote the course on Web Accessibility for Section 508 for ITTATC, the Information Technology Technical Assistance and Training Center, which was funded in support of Section 508.

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.

Javascript and CSS Source Code

HTML Source Code