Skip to content

.tip

· one of the small things

aria-expanded is the state your toggle button never says

A button that opens a menu looks open or closed. To a screen reader it is just "Filters, button" either way, unless aria-expanded carries the state, on the button that does the toggling rather than on the panel.

<button aria-expanded={open} onClick={() => setOpen(!open)}>
  Filters
</button>
{open && <FilterPanel />}

Render it as false when closed instead of leaving it off, because a missing attribute means the control has no expanded state at all. aria-controls is in the spec too, but most screen readers ignore it.

accessibilityfrontend