Accordion

When to use

• If users will be seeking a few specific pieces of content within a page, as opposed to needing the context of the whole page. 
• If you have only a small space to display a lot of content. 

When to consider something else 

• If users need to see most or all of the information on a page, for context. Use well-formatted text instead.
• If content is brief. Accordions increase cognitive load and interaction cost because users have to make decisions about what headers to click on. 

Usability guidance

• 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. 
• 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.) 

Accessibility guidance 

• Code header areas in the accordion as buttons. Using a assures accordions are usable with both screen readers and keyboards. 
• Use meaningful header areas in the accordion. Aim for informative labels like “Requesting live captioning for a University event” rather than vague ones like “Learn more.” 
• Use aria-controls to associate an accordion button with its related content. Connect an accordion button control with its appropriate content region by referencing the controlled element’s id in the button’s aria-controls attribute.