An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
The accordion component 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.
1. Header: contains the section title and is control for revealing the panel.
2. Icon: indicates if the panel is open or closed.
3. Panel: the section of content associated with an accordion header.
1. To organize related information. And if users will only need a few specific pieces of content within a page.
2. To shorten pages and reduce scrolling when content is not crucial to read in full.
3. When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.
1. If users need to see most or all of the information on a page. Use well-formatted text instead.
2. If there is not enough content to warrant condensing. Accordions increase cognitive load and interaction cost because users have to make decisions about what headers to click on.
1. Make the entire header selectable. Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.
2. Give interactive elements enough space. Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse. (The exact distance depends on the device.)
1. Header areas in the accordion should be coded as buttons.
Using a assures accordions are usable with both screen readers and keyboards.
2. 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.
3. 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.
4. Accordions use javascript to set the hidden values of their content areas. Each content area will have its hidden attribute set by the component, depending on its corresponding button’s aria-expanded attribute. To ensure your content is accessible in the event that the JavaScript does not load or is disabled, you should not manually set hidden on any of your content areas.