components
List Option
v.1.0.0 | SaturnConsidering accessibility is paramount in component design and development, as it guarantees effective interaction for all users, regardless of their abilities or limitations. In this section, we'll delve into how our listOption has been crafted with accessibility in focus, ensuring a seamless and meaningful experience for everyone.
The following mencioned props and recommendations are optional, althougt at Kubit strongly recommend their use to meet accessibility standars.
Text
Each option in the list must offer a descriptive and clear label text (including links), enabling users to understand the purpose of each link and where it directs them.
Keyboard interaction and Screen-reader experience
To ensure support for screen reader users, this component should include WAI-ARIA attributes (such as the alt and aria specific props) for correct semantic markup. All interactive elements should be operable for screen reader and keyboard users. If the ListOption and its elements utilize correct semantic markup:
- Screen reader users should receive accurate information regarding each element of the list and its corresponding label.
- The options must include an accessible label text and clearly indicate, especially for the first and highlighted result, that it can be selected because it matches the user's input.
- Screen readers should consistently announce when an option is selected.
Visual design
Color contrast
- For text labels within links, a color contrast of at least 4.5:1 is required for regular text, and 3:1 for large-scale text (18pt) or bold text (14pt).
- For all other elements, including the focus indicator, a color contrast ratio of at least 3:1 is necessary.
Target Size
The clickable area for buttons should be sufficiently large. The recommended size for the target area for pointer inputs is at least 24x24px, and for optimal readability, it should be 44x44px.