Accordion

Accordions are UI components that allow users to expand and collapse content sections, commonly used for FAQs, navigation menus, and content organization. While they help manage information density, accordions present unique accessibility challenges that must be carefully addressed.

The key accessibility requirements for accordions include proper ARIA attributes (`aria-expanded`, `aria-controls`), keyboard navigation support, and clear visual indicators of expand/collapse state. Screen reader users need to understand when content is available, when it's expanded, and how to control it.

Poorly implemented accordions can trap users, hide important information, or create navigation confusion. Well-implemented accordions provide clear affordances, consistent behavior, and multiple ways to access content.

Creating accessible accordions requires attention to several technical details:

ARIA Implementation: Use `aria-expanded="true/false"` on trigger buttons to indicate state, `aria-controls` to link triggers to their content panels, and `aria-labelledby` to associate labels with controls.

Keyboard Support: Ensure all accordion triggers are keyboard accessible. Users should be able to tab to triggers and activate them with Enter or Space. Consider implementing arrow key navigation between accordion items.

Focus Management: When accordions open or close, focus should be managed appropriately. Some implementations move focus to the newly opened content, others keep focus on the trigger.

Visual Indicators: Provide clear visual cues for expand/collapse state. Common patterns include rotating arrows, plus/minus icons, or changing button text.

Content Structure: Ensure accordion content is properly structured with headings and landmarks so screen readers can navigate within expanded sections.

Responsive Behavior: On mobile devices, consider whether accordions should auto-expand or maintain collapsed state for better usability.