Accordions

On this page

Example

Designer guidance

Developer guidance

Content editor guidance

Accessibility 

Support

Designer Guidance

When to use

Only use accordions to hide supporting or secondary information that most users won't need immediately, while keeping essential information in the main page content.

Accordions work best for for: 

• Content that users may prefer not to see.
• Niche information that must be available, but is unlikely to interest most users.
• Contexts where reducing visible content helps users scan the page more easily

When not to use

Accordions can reduce discoverability and create accessibility challenges. They increase interaction costs for all users and hide potentially relevant information. Use them sparingly and only when hiding content benefits the user. Instead, prioritise well-structured, traditional page content, which is generally more accessible and user-friendly.

Avoid using accordions for:

• Content that the majority of users will likely want or need to access, such as frequently asked questions.
• Content that users may intend to copy or print.

Additionally, refrain from using accordions solely to reduce page length. Research indicates that users are willing to scroll as long as the content remains relevant and easy to navigate. If the page feels excessively long, explore alternative methods for condensing the content.

How to use

When using an accordion, make sure to:

• Write clear and descriptive section titles so users can quickly determine whether the hidden content is relevant.
• Structure each section as a self-contained unit of information.
• Keep the content simple and limit it to a single level of depth.

Behaviours


User must have full control over expanding and collapsing accordion content, allowing them to open or close multiple sections.

Additionally, users should control their position on the page at all times. Do not automatically scroll the page when accordion tabs expand or collapse.

Developer Guidance

Best practices

• Enable full keyboard navigation.
• Ensure proper focus order.
• Ensure screen readers can interpret structure, behaviour and state correctly.

Content Editor Guidance

Best practices

• Use accordions sparingly, as they offer limited accessibility compared to standard content
• Write clear, concise headings to improve comprehension.
• Remove empty sections where possible. If a section must remain, explain why it is empty in the content area. 

For more detailed guidance for using this component visit the content example site.

Accessibility

A fully accessible accordion must be operable by keyboard, expose state to assistive technologies, maintain proper heading structure, and provide sufficient focus visibility and touch target sizes.

WCAG Success Criteria

• 1.3.2 Meaningful Sequence (Level A) 
  Content presented visually in a certain order must have the same order programmatically in the Document Object Model (DOM), unless the order doesn’t affect meaning.
• 1.4.10 Reflow (Level AA)
  Accordion content must reflow properly when expanded or collapsed, ensuring no information is lost on smaller screens.
• 2.1.1 Keyboard  (Level A)
  All accordion functionality (expanding and collapsing sections) must be operable with a keyboard alone, using keys such as Enter or Space.
• 2.4.3 Focus Order (Level A)
  Focus should move through accordion headers in a logical sequence that matches the visual and reading order.
• 2.4.7 Focus Visible (Level AA)
  Accordion headers must display a clear visible indicator when focused, so users can tell which header is active.
• 2.4.11 Focus Not Obscured (Minimum) (Level AA)
  When expanding a section, the focused accordion header must remain visible and not be hidden behind other content.
• 2.5.5 Target Size (Enhanced) (Level AAA)
  Accordion headers and icons should have large enough activation areas (at least 44x44px) to be easily selected with touch or pointer input.
• 4.1.2 Name, Role, Value (Level A)
  Accordion headers must expose their role (button), state (aria-expanded true/false), and relationships (via aria-controls) to assistive technologies so that users know whether content is expanded or collapsed.