Two accessible examples of an expand/collapse widget. Each widget is wrapped in a container with class "example" and the controlled content container uses the class "details".
This is the controlled content for the simple disclosure example. It is placed inside a container with the class "details". The widget updates aria-expanded on the button and aria-hidden on this container.
Keyboard: Enter or Space to toggle; Escape to close when open.
Accordions and disclosure widgets should expose the expanded state to assistive technology. This container has the "details" class as required. Animations are implemented in a way that preserves accessibility: we toggle aria-hidden rather than relying purely on CSS that might hide content from screen readers.
Use aria-expanded on the controlling element.
Use aria-hidden on the controlled container.
Give the controlled container an id and reference it with aria-controls.