Accordion Pattern

Accordion Pattern

An accordion displays vertically stacked sections of content, each of which can either be visible or hidden. They can help limit the amount of scrolling on a page.

Behavior

There are two main parts of an accordion section:

  • The header: which is used to control the display of the sections body
  • The body: a container that holds any content associated to the section, which is either visible or hidden

Keyboard Interaction

  • Content for Example header 1

  • Content for Example header 2

  • Content for Example header 3

  • Each section header is focusable
  • Enter and Space: when focused on a section header, should toggle the visibility of its body
  • Recommended:
    • Up and Down arrows: when focused on a section header should navigate to the next/previous header.
    • This should not change the state of the section (if the section is hidden, it stays hidden).

Markup

The header should contain a <button /> element that:

  • Has the header text within it
  • Has aria-controls with the value set to the id of the body container that it controls and is associated with
  • When the content is hidden aria-expanded should be set to "false"
  • When the content is visible aria-expanded should be set to "true"
  • If the section cannot be closed set aria-disabled="true" along with aria-expanded="true"

ARIA Documentation: http://w3c.github.io/aria-practices/#accordion