Accessible Accordions

The HTML5 <details> and <summary> elements provide built-in accordion functionality with native accessibility. The open attribute controls expanded state. This is the simplest and most accessible approach when styling allows.

For custom accordions, use role="button" on the header with aria-expanded to indicate state. Use aria-controls to link header to content panel. The content panel should have aria-labelledby pointing back to the header. Use hidden attribute or CSS to hide collapsed content.