Expand/Collapse Widget Examples

An accessible expand/collapse widget is an interactive component that allows users to show or hide content on demand. It uses proper semantic HTML and ARIA attributes to ensure all users, including those using assistive technologies, can understand and operate the control.

Key accessibility features include:

• A button element for the trigger control
• The aria-expanded attribute to indicate state
• The aria-controls attribute to associate the button with the controlled content
• Keyboard operability with visible focus indicators
• Clear visual indication of the expanded/collapsed state

Keyboard navigation is simple and follows standard patterns:

• Tab: Move focus to the expand/collapse button
• Enter or Space: Toggle the content visibility
• Shift + Tab: Move focus backward

The focus indicator (blue outline) clearly shows which element has keyboard focus. This ensures users navigating without a mouse can easily see where they are on the page.

The native HTML <details> and <summary> elements provide built-in expand/collapse functionality and are generally recommended when appropriate. However, there are some valid reasons to create a custom implementation:

• Styling flexibility: Custom implementations offer more control over appearance and animations
• Behavior customization: You may need specific interaction patterns not supported by the native elements
• Browser compatibility: While well-supported now, older browsers may have issues
• Integration requirements: Your design system or framework may require a specific pattern

When building custom widgets, it's critical to implement proper accessibility features to match or exceed the native elements' functionality. This includes semantic HTML, ARIA attributes, keyboard support, and focus management.

This expand/collapse widget demonstrates content that is visible by default. The button has aria-expanded="true" set initially, and the content does not have the hidden attribute.

Starting with expanded content can be useful when:

• The information is critical and should be immediately visible
• User research shows most visitors need this content
• You want to draw attention to important updates or announcements

Users can still collapse this section if they wish to hide the content.