Accessible Expand/Collapse Widgets

1. Semantic HTML5 Details/Summary

The most accessible way to handle disclosure patterns using native browser behavior.

What is the benefit of using native <details>?

The native element handles keyboard interaction (Space/Enter), focus management, and screen reader states (expanded/collapsed) automatically without needing custom JavaScript.

2. ARIA Disclosure Pattern

A custom implementation using aria-expanded and aria-controls for legacy support or custom styling requirements.

This widget uses a button to toggle the visibility of a content div. The aria-expanded attribute notifies assistive technology users of the current state, while aria-controls establishes a programmatic relationship between the trigger and the content.