Accessibility AC Library

 

/

Accordion

Test keyboard only, then screen reader + keyboard actions
  • Tab: Focus visibly moves to the expander
  • Spacebar: Toggles the expander
  • Enter: Toggles the expander
Test mobile screenreader gestures
  • Swipe: Focus moves to the element, expresses its state (expanded/collapsed)
  • Doubletap: Toggles the expander
Listen to screenreader output on all devices
  • Name: Its purpose is clear
  • Role: It identifies its role of a button or detail
  • State: It expresses its state (expanded/collapsed)