Accordions

Accordions are a list of headers that can be clicked to hide or reveal additional content.

Accessibility

  • Code header areas in the accordion as <buttons> so that they are usable with both screen readers and the keyboard.
  • Buttons should state whether they are expanded or not with the appropriate attribute: use either aria-expanded=’true’ or aria-expanded=’false’.
  • Each button has a unique name aria-controls=’collapsible-#’ that associates the control to the appropriate region by referencing the controlled elements id.
  • Each content area has an aria-hidden attribute set to either true or false. When true, the element (and all children) are neither visible or perceivable, and assistive technologies will skip this content.
  • Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.