
components
Accordion
v.1.0.0 | SaturnAccessibility is a crucial consideration when designing and developing components, as it ensures that all users, regardless of their abilities or limitations, can interact effectively with your project. In this section, we will explore how our accordion has been developed with accessibility in mind, ensuring that all users have a smooth and meaningful experience.
The following mencioned props and recommendations are optional, althougt at Kubit strongly recommend their use to meet accessibility standars.
Screenreaders
When the screen reader user gets to an accordion arrow, the accessible title for that accordion arrow should be read. If accordions use a correct semantic markup though the _ alt_ and aria specific props:
- Screen reader could know that an accordion is an accordion.
- Screen reader users could use the shortcuts to access directly to them.
Keyboard interaction
Accordions should be operable through a keyboard or a keyboard interface:
- Space or enter keys when focus is on the accordion header of a collapsed section, expands the section.
- Tab key moves focus to the next focusable element. All focusable elements in the accordion are included in the page Tab sequence.
- Shift+Tab keys move focus to the previous focusable element.
For further recommendations on expected keyboard interaction, check the WAI-ARIA pattern for Accordions.
Visual design
Color contrast
- For text labels in links needs a color contrast of at least 4'5:1 for regular text and 3:1 for large scale or bold text.
- For the rest of elements and the focus indicator at least of 3:1 color contrast ratio is needed.
Target Size
The area for clicking and tapping links must be large enough. The recommended size of the target for pointer inputs is at least 24x24px and 44x44px for best readability.
References
- Accordion (sections with show/hide functionality), W3C patterns
- Accordion accessible example, W3C patterns
- Designing the perfect accordion, Smashing Magazine
- Accordions are not always the answer to complex content on desktop, NN Group
- Accordion component, Gov.uk Design System
- Accordion component, Carbon Design System