components
Pill Selector V2
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 pillSelector has been developed with accessibility in mind, ensuring that all users have a smooth and meaningful experience. For more detailed information on this critical topic, please check our main accessibility page.
The following mencioned props and recommendations are optional, althougt at Kubit strongly recommend their use to meet accessibility standars.
Text
They needs a visible text labels that clearly indicate their purpose.
Icons
Decorative and selected icon have to be hidden to screen reader users, avoiding repetitive information.
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 pills are shown, they have to be grouped as a list of elements. Depending on their position in the page structure, the group of pills should have a heading, landmark or another suitable markup in order to make easy to understand and find them to screen reader users.
If there is a change in context by selecting a pill, the user has to be notified using the proper WAI-ARIA techniques.
Pill item
When the keyboard focus is moved the pill item does not automatically change from its checked state. It is necessary to press the "Enter" or "Space" key to check a pill item. If pill item is already checked and pressing the "Enter" or "Space" key does nothing.
If the "Down arrow" or "Right arrow" key is pressed:
- Move focus to the next pill item.
- If the last pill item has focus, focus moves to the first pill item.
If the "Up arrow" or "Left arrow" key is pressed:
- Moves focus to the previous pill item.
- If the radio button has focus, focus moves to the last pill item.
If the "Tab" key is pressed the keyboard focus would go to the next interaction element outside of the pill group.
If the "Shift+Tab" keys are pressed, the keyboard focus would go to the previous interaction element outside the pill group.
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.
Related components
Check other components specific accesibility recommendations:
