Web
Keyboard navigation
- Use Enter or Space to expand or collapse accordion sections when focused
- Use Tab to move focus between accordion headers
- Focus remains on the accordion header after expanding or collapsing
- Ensure all interactive elements within expanded content are keyboard accessible
Screen reader support
- Use correct ARIA attributes: aria-expanded to indicate section state (true/false)
- Use aria-controls to associate headers with their content panels
- Use button elements for accordion headers to ensure proper semantics
- Announce the current state (expanded or collapsed) when users interact with sections
Visual accessibility
- Provide clear focus indicators on accordion headers
- Ensure sufficient colour contrast between text and background using the correct design tokens
- Use the icon arrow direction to indicate the expanded/collapsed state
- Do not rely on colour alone to indicate state
- Make sure there is adequate space around controls for a clear hit state, ideally 44px
Content structure
- Use semantic HTML headings (h2, h3, etc.) within accordion headers for proper page structure
- Ensure accordion headers describe the content they reveal
- Keep header text concise and descriptive
React Native
Touch accessibility
- Ensure accordion headers have a minimum touch target size of 44px × 44px
- Provide sufficient spacing between accordion sections for accurate tapping
- Support both tap and long-press gestures where appropriate
Screen reader support (specific to mobile)
- Use accessibilityRole="button" for accordion headers
- Use accessibilityState={{ expanded: true/false }} to communicate the section state
- Provide accessibilityLabel for accordion headers that clearly describe the content
- Use accessibilityHint to inform users that they can expand or collapse sections
- Ensure screen readers announce expanded content
Visual accessibility
- Provide clear focus indicators that meet platform guidelines (iOS and Android differ slightly)
- Ensure colour contrast by using the correct design tokens
- Use platform-appropriate animations for expand/collapse actions
Platform-specific considerations
- Follow iOS Human Interface Guidelines for accordion behaviour on iOS
- Follow Material Design guidelines for accordion behaviour on Android
- Ensure that the content is compatible with VoiceOver (iOS) and TalkBack (Android) to ensure proper announcement