components
Dot
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 dot 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.
Size
In the simple small size, ensure that if the user changes the font size, the component scales the same size as the rest of the textual 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. Dot is an informative graphic, which means that the information can be only read/scanned, but is not interactive and it does not do any actions, apart from the possibility of being read. Ensure that this element is visible to screen readers and correctly informs about the exact number of notifications.
If it uses a correct semantic markup:
- Screen readers could know that the notification bubble is information that belongs to the notifications.
- Screen readers should be able to detect and inform to the users about the exact number of notifications.
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.