components
Carousel
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 carousel 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.
Due to accessibility concerns this component does not autoplay the elements.
Keyboard interaction and Screen-reader experience
To support screen reader users, this component should include WAI ARIA attributes (the alt and aria specific props) to have a correct semantic markup. Screen reader and keyboard users should be able to operate with all the interactive elements.
This component does not have to be read as a carousel for the screen readers but as a list of elements. Ensure hiding the arrows and the interactive dots so users scan the information as a simple list.
Arrows
Use this structure for accessible labels:
- Left arrow text description: "Previous" + [item title or category]
- Right arrow text description: "Next" + [item title or category]
- Accessible label for items: "[item title, name or description]"
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 (18pt) or bold text (14pt).
- For the rest of elements and the focus indicator at least of 3:1 color contrast ratio is needed.
- For the dots make sure that they offer sufficient color contrast and that the color is not the only way to provide information
Target Size
The area for clicking and tapping buttons must be large enough. The recommended size of the target for pointer inputs is at least 24x24px and 44x44px for best readability.
Related components
Check other components specific accesibility recommendations:
