Example 1: Native disclosure (<details>)
What information is included?
This section expands and collapses using the browser’s native disclosure element, which supports keyboard interaction by default.
- Keyboard: Tab to the summary, then press Enter or Space to toggle.
- State is conveyed automatically (expanded/collapsed).
- Content is only visible when expanded.
Example 2: Button controlling a region
Keyboard: Tab to the button, then press Enter or Space to toggle.
This panel is toggled by a standard button with aria-expanded and
aria-controls. The controlled content is a labeled region for assistive technologies.
- The button text updates to match the current state.
- The region is removed from the accessibility tree when hidden.
- Focus remains on the toggle button (no unexpected focus movement).