When to use

• Use an accordion when a page contains multiple sections of content and users are likely to need only 1 or 2 at a time, such as an FAQ page
• Use an accordion when a page is long enough that showing everything at once would make it difficult to scan

When not to use

• If the content is critical and should always be visible, do not hide it inside an accordion.
• If the amount of content is small enough to show in full, display it directly on the page rather than adding an expand and collapse interaction for minimal benefit
• If users need to read or compare all sections together, showing the content openly is more effective than requiring them to expand each section individually

Content guidance

• Write headers that tell the user what they will find inside, such as "Undergraduate entry requirements". Vague headers like "More information" give no indication of the content
• Keep headers to a single line. Long headers are harder to scan when all sections are collapsed

How it works

• Multiple accordion sections can be open at the same time
• Opening one section does not close the others
• All sections are collapsed by default

Accessibility

This component is designed with accessibility built in:

• Each header is keyboard focusable and can be toggled with enter or space
• The expanded and collapsed state is communicated to screen readers
• Focus remains on the header after toggling, so the user does not lose their place

When implementing, verify:

• Each accordion header clearly describes the content it reveals. Screen reader users navigate by headers, so vague labels like "More information" reduce usability
• If accordion content includes interactive elements (links, form fields), confirm that tab order within the expanded section is logical

Resources

• Figma
• Storybook