Skip to main content

Accordion

Use the Accordion to progressively disclose grouped content, letting users reveal and hide sections to reduce page length and focus on what matters.

OverviewPropertiesUsageAccessibility

New

Note

See Accessibility in Design Foundations for explanations of key concepts and best practices.

Accessible names and roles​

  • Do verify the trigger has a clear, descriptive accessible name that reflects what will expand.

Keyboard accessibility and focus​

Accordion handles focus management out of the box. When a section is expanded or collapsed, focus stays on the trigger. The user tabs into the revealed content when ready.

  • Do verify the revealed content appears immediately after the trigger in reading order, so Tab moves into it naturally.
  • Don't move focus into the revealed content on activation. Doing so would suppress the state announcement and screen reader users wouldn't know that the content opened.

State announcements​

Accordion handles state announcements out of the box: aria-expanded="true" when expanded; aria-expanded="false" when collapsed.

  • Do ensure that the revealed content follows in a logical tab order so users can navigate into it after the state is announced.
Still have questions?
Find answers in the Dynatrace Community