Section borders expand to full width of container.
Reduced spacing around title and content body. Also, smaller font sizes resulting in an overall denser display of content.
Border aligns to the title text and expand/collapse icon.
To ensure that usage of this component complies with accessibility guidelines:
- Provide descriptive label for accordion header
- Be aware that embedding lengthy content in an accordion can be disorienting. When the accordion header expands, it can give the appearance of moving to another page
This component has compliance with WCAG guidelines by:
- Providing keyboard interactions to:
- Expand and collapse accordion headers
- Navigate and reverse navigate through the accordion headers
- Generating ARIA tags for accessibility, specifically