Short description

Accordions can make information processing more effective. Best suited for plain text, lists, tables and inline links. A good example for use could be a FAQ and Terms and conditions.

When and how to use it

Use the accordions to "hide" information that users doesn't necessarily need to read or only need to read occasionally. If the majority of users will read it, it should be visible.

Behaviour

Depending on what suits the situation best, an accordion can have one section open and the rest closed, or many sections open at the same time.

The default accordion is collapsed with the chevron pointing down. There is a grey hover on the header "cell". When the user clicks anywhere on the "cell", the expanded area is displayed and the chevron points up. The expanded content background is white or grey, depending on what suits best.

Example

Let's say the user is interested in opening an account. The information about the account can be divided into categories such as “About”, “How do I open an account” and “Terms and conditions”. With the accordion, the user gets a quick overview of the information and can decide what section to expand to read more.

Do's and don'ts

Do

• Use the accordion for FAQ, Terms and Conditions, etc.

Don't

• Do NOT place heavy content such as entire flows videos or interactive components in the accordion.

• ​​Write short and to the point
• Make it clear what content the user can expect when clicking
• Only use upper case on the first word, unless it is a proper name or abbreviation

https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/

Review

Result from the latest accessibility review of the component (Chlorophyll): 2023-07-19

• Contrast: so-so (on hover-state)
• Colour-blindness: good
• Code + aria: ok
• Touch + keyboard: ok - minor visual select bug
• Dark-mode: n/a
• Focus: ok - need new style
• Reader: bad - multiple missing part

• Details: Specification in Figma
• Instruction: How to access Figma