Accordion

import { ... } from '@ag.ds-next/react/accordion';

Here are the reasons why our accordion works the way it does.

Use accordions sparingly

There can be disadvantages of using accordions for some users. Consider if the benefits outweigh the disadvantages through usability testing.

Accordions can decrease cognitive load but they force a user to click on each accordion to get the full picture.

Accordions fragment a user’s experience. They make a user switch focus between accordions to gather all information they need.

Some users might also not understand how an accordion works. They may miss or ignore important information if it’s hidden.

It can be hard for users to scan a web page with accordions for relevant content. For example, a web browser’s ‘find on page’ search function doesn’t detect content hidden by an accordion. Users can’t then use their existing tools and behaviours to find content.

Single action accordion

Items in an Accordion group don’t influence each other, otherwise it’s unpredictable for the user. For example, opening one item in a group will not close another.

It ensures we don’t confuse a user by content that suddenly disappears.

Accordion titles

Use short accordion titles to accurately and succinctly describe accordion panel content.

Chevron icons

We use an ˄ and ˅ chevron icon when the accordion opens or closes to convey the expanding and collapsing elements.

We align chevron icons to the right after the accordion title. That way, they’re more accessible for users with low vision.

We don’t use + or - symbols, or arrows. A user may confuse these alternate symbols with other common patterns.

For example, + or - symbols can indicate a user has more details to add on a form. Arrows can indicate a user can navigate in a direction.