What is the best initial state for an accordion menu?

1. What is an accordion menu?
2. Are accordion menus accessible?
3. How do you make an accordion accessible?

What is an accordion menu?

An accordion is a menu composed of vertically stacked headers that reveal more details when triggered (often by a mouse click). Since this web design pattern highlights only the most critical information of a section but makes the rest easily accessible, it's a common element in responsive design.

Are accordion menus accessible?

Buttons are used as the accordions so that they are tab-able by keyboard users and accessible to screen readers. Each accordion button has a unique id associated with its aria-controls (each button controls this particular id which references the hidden content beneath it).

How do you make an accordion accessible?

Screen Reader Accessibility

Each accordion must start with an accurate aria-expanded attribute. Use aria-expanded="false" if the accordion is closed. Use aria-expanded="true" if the accordion is opened.