Accordion
An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
Accordions delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content, allowing the user to decide which sections to read. Accordions can make information processing and discovering more effective, but they do hide content from users.
Overview
Keyboard interactions
Each accordion is a tab stop. Space or Enter keys expand or collapse accordions, which are collapsed by default. Interactive elements within expanded accordions integrate into the tab order automatically.
Development considerations
Code header areas in the accordion as buttons. Using a <button type="button"> assures accordions are usable with both screen readers and keyboards.
Use aria-expanded on buttons to express an accordion’s default state. Buttons should state if they are expanded by default with aria-expanded="true". The aria-expanded="false" attribute will be added to other buttons when the accordion is initialized by the JavaScript.
Use unique ids. Each button has a unique name, aria-controls="id", that associates the control with the appropriate region by referencing the controlled element’s id.