Refine By

Accordions

  • Contents:
  • Accordions are controls in the user interface that collapse and expand to reveal content.
  • They are used on both desktop and mobile to conserve space and clean up an interface.
  • On Android, they are referred to as Expansion panels, while on iOS, the appropriate label is Table View.
  • They can also be used for organizing submenus on mobile.

Guidelines

  • Always mark an accordion with an indicator, like a caret or a plus sign.
  • Use clear and succinct labels to set user expectations for what to find when the accordion expands.
  • Only use accordions to hold additional content that is largely informational and does not require direct action from the user.
  • A great user experience is one that is not degraded if the user fails to expand an accordion.

Accessibility

  • Ensure that users can understand what information will be expanded by using clear, concise text descriptions
  • Ensure that all interactions can be triggered by users who are navigating with a keyboard.
  • Ensure that sufficient color contrast is used and that a focus state is provided so that the user knows which element they are on.
  • Provide helper content to screen reader users using ARIA so that a user knows whether or not an element is expanded.
  • Ensure that programmatic focus moves to the newly expanded content.
Read More

Considerations

  • When gathering content to be provided within an accordion, ensure that the information is related. Per the W3C, “The primary use of an Accordion is to present multiple sections of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy. The general look is similar to a tree where each root tree node is an expandable accordion header.”

 

  • When testing to ensure keyboard-only access, ensure that consistent behaviors are present:
    • The tab key should allow users to navigate between headings
    • Users should be able to use the up/left and down/right arrow keys to navigate between elements as well.
    • The “home” key should be able to be used to “jump back” to the first accordion header.
    • The “end” key should be able to be used to “jump” to the last accordion header.
    • Both the enter key and the spacebar should be used to expand an accordion section.

 

ARIA Roles, States, and Properties

  • The accordion component must have a role of  tablist  and have  aria-multiselectable=”true”. This will enable an assistive technology, such as screen reader, to alert the user that the tablist is an accordion or a multiselectable tablist. It will also ensure that the user can anticipate how to navigate the information.
  • Within the tablist is a set of tab/tabpanel pairs. The header should have the ARIA role of “tab”. The accordion panel uses the role  tabpane l and should have an  aria-labelled by  relationship referencing the corresponding header having a role of  tab.
  • An accordion should manage the expanded/collapsed state of each tab by maintaining its  aria-expanded  state.
  • An accordion should convey the visibility of each tabpanel by maintaining its  aria-hidden  state.

Related Elements

Related Components

Version History

Date/Time of ChangeWho Made the ChangeChange Details
Aug. 23 2019 3:25pmElla IpUpdated web pattern.
Aug. 23 2019 3:29pmElla IpUpdated web pattern.