Accordion

An accordion lets users show and hide sections of related content.

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

Here are ways to make an accordion more accessible and inclusive for 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.