Intermediate
An accessible FAQ disclosure
Each FAQ question is a clickable <h3>: it toggles with the mouse but isn't reachable by keyboard and doesn't say whether it is open.
Rebuild Question as a disclosure: inside the <h3>, a <button type="button"> with the question text, aria-expanded (true/false) and aria-controls pointing to the answer's id (use useId). The answer element has that id and the hidden attribute while closed.
Each question opens and closes on its own.
What Check tests
- Each question is a button inside its
<h3> - All buttons start with
aria-expanded="false" aria-controlspoints to a hidden answer- Clicking the second question opens only its answer
- Clicking it again closes it
- The ids come from
useId
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.