Accordion Accessibility

Accordion accessibility ensures expandable content sections work for keyboard users and screen readers. Accessible accordions properly communicate section headings, expanded states, and provide complete keyboard navigation.

What Is Accordion Accessibility

Accordions organize content into collapsible sections, each with a header that toggles the visibility of associated content. This pattern helps manage information density by allowing users to focus on relevant sections while keeping other content minimized.

Accessibility requirements for accordions include proper heading structure, keyboard operability, state communication, and logical content relationships. Users must understand which sections exist, which are expanded, and how to navigate between them.

The WAI-ARIA Authoring Practices describe the accordion pattern using buttons to trigger section expansion, aria-expanded for state, and aria-controls to associate buttons with their content panels.

How Accordion Accessibility Works

Accordion headers typically use button elements that toggle content visibility. The button uses aria-expanded to communicate whether its section is open (true) or closed (false). Screen readers announce this state when users focus the button.

The relationship between button and content panel uses aria-controls, which references the panel’s ID. This helps assistive technologies understand which content the button controls, though support for aria-controls varies across screen readers.

Heading hierarchy integrates with accordion structure. If accordion sections represent heading-level content, wrapping buttons in appropriate heading elements (h2, h3, etc.) maintains document outline. The button inside the heading provides the trigger functionality while the heading provides semantic structure.

Keyboard navigation for accordions typically includes:

• Tab: Move between accordion headers (and other focusable elements)
• Enter/Space: Toggle the focused section’s expanded state
• Optional: Arrow keys to move between headers without expanding

Content panels should have appropriate focus management. When a section expands, focus can remain on the header (common) or move into the content (less common). When content includes interactive elements, Tab should move into the expanded content naturally.

Key Considerations

• Use button elements for accordion triggers
• Apply aria-expanded to communicate open/closed state
• Connect buttons to panels with aria-controls
• Maintain appropriate heading hierarchy
• Provide keyboard activation with Enter and Space
• Ensure expanded content is reachable via Tab
• Consider whether multiple sections can be open simultaneously

Common Questions

Should accordions allow multiple sections open simultaneously?

Both patterns exist: exclusive accordions (one section open at a time) and independent accordions (multiple sections can open). The choice depends on content relationships and user needs.

Exclusive accordions automatically close other sections when opening one. Independent accordions let users keep multiple sections open for comparison. Document the expected behavior and test that keyboard interaction matches expectations for the chosen pattern.

How should accordion headers relate to heading levels?

Accordion headers should fit within the document’s heading hierarchy. If the accordion appears after an h2, accordion headers might be h3 elements containing the trigger buttons.

The button inside the heading is acceptable and maintains both accessibility (proper heading structure for navigation) and functionality (clickable trigger). Some implementations use button alone without heading wrapper, which works but loses heading navigation benefits.

Should collapsed accordion content be hidden from screen readers?

Collapsed accordion content should be hidden from assistive technologies. Using display: none or visibility: hidden on collapsed panels removes them from the accessibility tree. Hidden content should not be reachable via screen reader navigation.

When panels expand, they become visible and accessible. The transition between states should be immediate for accessibility purposes even if visual animation occurs. Users should not be able to access content that is visually hidden.

Summary

Accordion accessibility uses button triggers with aria-expanded state, maintains heading hierarchy, and provides keyboard activation for expanding and collapsing content sections. Proper implementation ensures users can navigate between sections, understand their state, and access revealed content.