Expand/Collapse Widget Demo

This page demonstrates accessible expand/collapse widgets. Each example can be toggled using keyboard navigation (Enter or Space) or mouse clicks. The content is hidden by default and expands smoothly when activated.

This is the first example of an expandable section. It contains basic information about accessibility guidelines. The widget uses semantic HTML where possible and ARIA attributes to ensure full keyboard accessibility and screen reader support.

  • Use clear and descriptive headings
  • Ensure proper contrast ratios
  • Provide keyboard navigation
  • Include smooth transitions for better UX

This second example demonstrates more advanced features of the expand/collapse pattern. Notice how the visual indicator changes from a plus (+) to a minus (−) when expanded, providing clear visual feedback.

Key accessibility considerations include:

Accessibility Checklist
Feature WCAG Success Criterion
Keyboard focusable 2.1.1 Keyboard
ARIA live regions 4.1.2 Name, Role, Value
Visible focus indicator 2.4.7 Focus Visible

How to use these widgets:

  1. Keyboard users: Tab to the heading and press Enter or Space to toggle
  2. Screen reader users: The expanded state is announced automatically
  3. Mouse users: Click anywhere on the heading to expand/collapse
  4. Touch devices: Tap the heading to toggle the content

These widgets respect user preferences for reduced motion and high contrast modes, ensuring they work well across different accessibility needs.