Expand/Collapse Widget Examples

Expand/collapse widgets, also called disclosure widgets, allow users to reveal and hide content on demand. This reduces cognitive load and helps focus attention on the most relevant information.

To use this widget: click the button to toggle the visibility of the content below. The button's label and visual indicator will update to reflect the current state.

Web accessibility means ensuring that websites, web applications, and digital content are usable by everyone, including people with disabilities. This includes people who are blind, deaf, have limited mobility, or have cognitive disabilities.

Accessible design benefits everyone. Users may experience temporary disabilities (injured arm, bright sunlight), situational barriers (noisy environment, small screen), or may simply prefer alternative ways of interacting with content.

Building accessible digital products is both an ethical imperative and a legal requirement in many jurisdictions.

Test accessibility by:

• Using keyboard navigation only (no mouse)
• Testing with screen readers (NVDA, JAWS, VoiceOver)
• Checking color contrast ratios
• Validating HTML and ARIA usage
• Testing at different zoom levels
• Testing on a variety of devices and browsers

This widget includes the following accessibility features:

• Semantic HTML: Uses native button elements instead of custom widgets.
• ARIA attributes: Uses aria-expanded to indicate state and aria-controls to associate button with content.
• Keyboard support: Fully operable with keyboard (Enter/Space to toggle).
• Focus management: Clear focus indicators meet 3:1 contrast ratio.
• Visual feedback: Rotating icon and smooth transitions indicate state changes.
• Reduced motion: Respects prefers-reduced-motion preference.
• High contrast: Adapts to forced-colors mode using system colors.