A11y Lablearn by doing
0/20

Widgets · 12

Build a disclosure

A show-and-hide control must expose its state and keep the controlled content synchronized.

What to do

  1. Use a native button named Delivery details.
  2. Connect it to the panel with aria-controls and start with aria-expanded="false".
  3. Keep aria-expanded and the panel’s hidden state synchronized after activation.
/index.html
Preview
updating…

Result

Run the checks

Edit the HTML and select “Check solution”. The preview updates automatically.

If you are stuck

The preview supplies the interaction logic. Give it a valid button, boolean state, and matching controlled ID.

Read the exact rule or pattern

Exercise 12 of 20

axe-core

Automated audit