Data Display
Accordion
Accordion are used to organize content in a compact, collapsible manner, making it easier for users to navigate and find information without overwhelming them too much content at once
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features5 checks
- Keyboard navigable buttons
- ARIA attributes for expand/collapse state
- Focus management
- Clear visual indicators
- Semantic HTML structure
When to use this component
✓Do's
- •Long content that can be organized into sections
- •FAQ pages with many questions
- •Progressive disclosure of detailed information
- •Reducing visual clutter on content-heavy pages
✗Don'ts
- •Content users need to see simultaneously, show it all
- •Navigation, use Tabs or links
- •Very short content, no need to collapse
- •Critical information that must be visible
Do's and Don'ts
✓ Do's
7-10 business days.
Use accordions for FAQ pages and collapsible content sections.
✗ Don'ts
Don't hide critical information inside accordions, users may miss it.