Accordion
An accordion lets users show and hide sections of related content.
import { ... } from '@ag.ds-next/react/accordion';Learn more about how to meet WCAG success criteria when implementing accordions. This makes them accessible and inclusive for users of all abilities and situations.
The accordion component passed accessibility testing in 2022.
Clear and descriptive accordion titles
Requirements
- Use
h2toh6to identify headings on accordion titles. - Titles follow the order and importance within the other headings on the page.
- Accordion title is clear and descriptive in the way it describes its contents.
Benefits
- Users find it easier to locate the information they are looking for.
- Users have a better understanding of what information is inside the accordion.
- Helps users decide if they want to open the accordion.
- Accordions are presented in a logical order to users of assistive technology.
WCAG references
- Understanding success criterion 1.3.2 Meaningful sequence
- Understanding success criterion 2.4.6 Headings and labels