When to use this component
- When you have a lot of related supplemental content to convey on one page; and
- You want to give users the ability to select which content to expand and review.
When not to use this component
- When you need users to read all the content on the page. Putting critical content into accordions increases interaction cost and user resentment.
- When the content isn’t related and should be different pages to improve both usability and searchability.
Accessibility and Usability
- Users should have the ability to expand as many accordions as they want - expanding one accordion should not collapse another accordion.
- Accordions should have clear focus indicators on hover and on keyboard focus.
- Accordions should show a plus sign when collapsed and a minus sign when expanded.
- Screen reader users should be alerted to the fact that they have expanded an accordion successfully.