Accordion

An accordion hides sections of content users can choose to see if it is relevant to them.

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

Here are ways to make an accordion more accessible and inclusive of users of any ability or environment.

For general help with accessibility, go to the Web Content Accessibility Guidelines 2.1.

Accordion titles

2.4.6 Headings and Labels and G131: Providing descriptive labels addresses accessibility criteria relevant to accordion titles. Check that each title makes an accordion’s purpose clear.

Use h1 to h6 to identify headings and tag accordion titles. They should follow the order and importance within the other headings on the page.