Expand/Collapse Widget Demo
These examples demonstrate accessible expand/collapse (disclosure) widgets. Each toggle button uses aria-expanded to communicate state and aria-controls to identify the controlled content region.
Example 1: What is web accessibility?
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can perceive, understand, navigate, and interact with the web, and they can contribute to the web.
Web accessibility encompasses all disabilities that affect access to the web, including auditory, cognitive, neurological, physical, speech, and visual disabilities.
Example 2: Keyboard shortcuts
Here are some common keyboard shortcuts used in web applications:
- Tab — Move focus to the next interactive element
- Shift + Tab — Move focus to the previous interactive element
- Enter or Space — Activate a button or link
- Escape — Close a dialog or dismiss a popup
- Arrow keys — Navigate within composite widgets such as menus, tabs, or grids
Example 3: Frequently asked questions
You can use the native HTML <details> and <summary> elements for a built-in disclosure widget with no JavaScript required. However, if you need more control over styling, animation, or behavior, a custom implementation using a <button> with aria-expanded and aria-controls is a solid, accessible approach.
The key requirements are:
- The toggle must be a
<button>(or haverole="button"). - The button must have
aria-expandedset totrueorfalseto reflect the current state. - The controlled content should be hidden when collapsed and visible when expanded.
- Optionally,
aria-controlscan link the button to the content region.