components
Chip
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 chip 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.
Text
They need visible and unique text labels that clearly indicate the filter applied.
Icon
Chips might have a decorative icon. These icons have to be hidden for screen reader users if thet don't add information to the content or the interaction.
Screenreader and Keyboard interactions
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.
When several chips are shown, they have to be grouped as a list. Depending on their position in the page structure, the group of chips should have a heading, landmark or another suitable markup in order to make it easy to understand and find them to screen reader users.
Remove functionality
The whole chip is a button to trigger the remove functionality. In order to make the remove functionality accessible:
- For screen reader users: An accessible label has to be added. The pattern for this accessible label might be: [Chip text label] + Remove
- For keyboard users chips have to operable through a keyboard.
- When a filter is removed, there is a change in context and screen reader users must be warned about this change.
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.
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.