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
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.
In this implementation, any number of panels of the accordion can be expanded at any one time.
EN 301 549 v 2.1.2
- 184.108.40.206 Keyboard
- 220.127.116.11 Headings and Labels
- 18.104.22.168 Focus Visible
- 22.214.171.124 Name, Role, Value