Dynamic widget state

Why it matters

Agents operate interactive widgets through the accessibility tree. Expandable panels, tabs, menus, switches, dialogs, and async status areas need explicit state so agents can tell what is open, selected, checked, current, or updating.

How to fix it

Expose the state of interactive widgets with ARIA state attributes.

1. Add aria-expanded and aria-controls to disclosure buttons.

   <button aria-expanded="false" aria-controls="filters">Filters</button>
   <section id="filters" hidden>...</section>

2. Add aria-selected to tabs, aria-checked to switches and role="status" to async messages.

Verify

Run a new scan for this checkpoint: