Example 1: Basic Expand/Collapse
Accessibility (often abbreviated as a11y) is the practice of making websites and applications usable by as many people as possible, including those with disabilities.
This includes people with visual, auditory, motor, and cognitive impairments, as well as temporary disabilities and situational limitations.
Example 2: Multiple Expand/Collapse Sections
Many users navigate websites using only a keyboard, including:
- People with motor disabilities who cannot use a mouse
- People who use screen readers
- Power users who prefer keyboard shortcuts
- People with temporary injuries
All interactive elements must be keyboard operable with a visible focus indicator.
WCAG (Web Content Accessibility Guidelines) are internationally recognized standards for web accessibility developed by the W3C.
WCAG 2.2 Level AA is the most commonly referenced standard for digital accessibility compliance.
Comprehensive accessibility testing includes:
- Automated testing tools (catches ~30-40% of issues)
- Manual keyboard testing
- Screen reader testing
- Color contrast verification
- Zoom and reflow testing at 200% and 320px width
- Testing in High Contrast / Forced Colors mode
- User testing with people with disabilities
Example 3: Inline Expand/Collapse
This is an example of an inline expand/collapse pattern where the button is styled to appear within flowing text content.
The controlled content appears below and maintains proper semantic relationships through aria-controls and aria-expanded attributes.
Example 4: Initially Expanded Content
This section starts in the expanded state to show important information by default.
Keyboard instructions:
- Tab - Move focus to the button
- Enter or Space - Toggle expansion state
- Shift+Tab - Move focus backward
The button uses aria-expanded to indicate its current state to assistive technology.