Basic Expand/Collapse
A simple expandable section with smooth transitions and keyboard support.
An expandable widget, also known as an accordion or disclosure widget, allows users to show and hide sections of content. This helps organize information hierarchically and reduces cognitive load by showing only relevant details at a time.
Key accessibility features include:
- Proper heading association with
aria-labelledby - State indication with
aria-expanded - Control relationship with
aria-controls - Keyboard navigation support (Enter/Space to toggle, Escape to close)
- Visible focus indicators
Multiple Expandable Sections
Several expandable sections where only one can be open at a time (accordion behavior).
Our accessibility-focused expandable widgets include:
- Keyboard navigation with Enter, Space, and Escape keys
- Screen reader announcements for state changes
- Smooth transitions that don't interfere with assistive technology
- Proper focus management
- Support for high contrast mode
- Responsive design that works at all viewport sizes
These widgets improve the experience for:
- Screen reader users: Clear announcements of expanded/collapsed state
- Keyboard users: Full navigation support without mouse dependency
- Low vision users: High contrast focus indicators and sufficient text contrast
- Cognitive load: Progressive disclosure reduces information overload
- Mobile users: Touch-friendly controls with adequate touch targets
When implementing expandable widgets:
- Always provide a visible label for the control
- Use semantic HTML where possible
- Ensure content is accessible when expanded
- Provide clear visual feedback for state changes
- Test with real assistive technology
- Consider the default state based on user needs
FAQ Style
Question-answer format commonly used for frequently asked questions.
Accessibility ensures that all users, regardless of their abilities or the technology they use, can interact with and understand the content. Expandable widgets are particularly important for accessibility because they control how information is revealed to users, and poor implementation can hide critical content from assistive technologies or keyboard navigation.
Test with:
- Screen readers (NVDA, JAWS, VoiceOver, TalkBack)
- Keyboard-only navigation
- High contrast mode
- Reduced motion preferences
- Different screen sizes and zoom levels
- Automated accessibility testing tools
Manual testing with actual assistive technology is essential for comprehensive coverage.
Relevant WCAG 2.2 success criteria include:
- 1.4.10 Reflow: Content must work at 320px without loss of content or functionality
- 1.4.13 Content on Hover/Focus: Expanded content must remain accessible
- 2.1.1 Keyboard: All functionality must be keyboard accessible
- 2.4.7 Focus Visible: Keyboard focus must be clearly visible
- 4.1.2 Name, Role, Value: Proper ARIA attributes for state and relationships