DEV 6.2 – Create accessible accordions

Why is this important?

Accordions can be useful elements for those using screen readers, as they allow users to select and open just the content they want to read. Accordions must be implemented in an appropriate manner to ensure they are understandable to users with visual impairments.


Hide collapsed content visually and for screen reader users

    • If content is visible but not hidden semantically, screen reader users will still be able to access it even when the section it belongs in is collapsed;
    • The CSS style “display: none” will hide content on screen and prevent screen readers from being able accessing it.

Use descriptive headings for accordion panel headers

    • It is important for all users not to have to open each section to work out what is in it. Provide sufficient description in the heading to inform users of the nature of the section’s content without them having to open it.

Use aria to denote expanded and collapsed panels

Use <button> elements for accordion section headings

    • Avoid custom JavaScript solutions, where possible - use appropriate ARIA roles if required.

Examples of good practice

In this implementation, one panel of the accordion is always expanded, and only one panel may be expanded at a time.

Content divided into 3 sections. The content of the first and second sections is visible. The content of section 3 is not visible. There is a control to show the content for section 3.

In this implementation, any number of panels of the accordion can be expanded at any one time.


WCAG 2.1

EN 301 549 v 2.1.2

    • Keyboard
    • Headings and Labels
    • Focus Visible
    • Name, Role, Value

Further reading