Lesson 5 of 8
Collapsible FAQ
- 14 min
- 6 checks
- 3 hints
- Go to task
Goal
A button that announces what it opens
Explanation
An accordion is a stack of headings: click one and the panel beneath it opens or closes. Each heading here is a button inside a heading element, not a div with a listener, because a button is reachable with Tab, works with Enter and Space, and screen readers announce it as a button without any extra code from you.
The button still has to announce two things: whether its panel is open, which it does with aria-expanded, and which panel it controls, which it does with aria-controls set to the panel's id. Also add hidden to a collapsed panel so it leaves the accessibility tree too.
Watch out: the value of aria-expanded is a string, not a boolean, and the string 'false' isn't empty, so the condition if (button.getAttribute('aria-expanded')) is always true. Compare the value with === 'true' instead.
Your task
Give every button in #faq an aria-controls attribute with its panel's id and aria-expanded="false". Then make clicking a button toggle its aria-expanded and its panel's hidden together, so each button controls its own panel only.
Checks
6 checks- Each button is linked to its panel through aria-controls
- The panels are collapsed and the buttons say so
- Clicking a button opens its panel
- The button announces that its panel is open
- A second click collapses the panel
- Each button controls its own panel only