Accordion

Accordion and Accordion Item work together to provide a vertically stacked list of headers that reveal or hide associated sections of content.

This component follows the Accordion pattern from the W3C.

• Use one h1 per page.
• Nest subsequent headings (h2–h6) in order to create a logical outline.
• Headings must be descriptive and scannable, supporting both accessibility and SEO.

Accordion Item Headings

• Use the heading-level attribute to set the correct heading level for Accordion Items.
• Match the Accordion heading level to the page hierarchy (don’t skip levels).

• Accordion: Manual accessibility test
• WAI: Headings
• Accordions Are Not Always the Answer for Complex Content on Desktops