components
Link
v.1.0.0 | SaturnAccessibility
Accessibility 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 link 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
Use especific text labels. Links should have a meaningful and unique visible text label that clearly specify their purpose.
Don’t use the same link text for different URLs on the same page.
Screen reader and keyboard users experience
If link use a correct semantic markup though the alt and aria specific props::
- Screen reader and keyboard users would be able to interact with them.
- Screen readers could know that a link is a link and other information.
- Screen reader user could use the shortcuts to access directly to them.
Keyboard interaction
The link component should be operable through a keyboard or a keyboard interface.
Icon
If the link contains an icon
If the icon is decorative, this information should be hidden to the screen reader users so they don't have to lister the information twice.
If the button is an image (for example an icon).
It needs a text description that will be the accessible label for screen reader users, and when possible will we include a visible text label to facilitate the interaction for people that uses speech recognition softwares. The accessible label has to include links functionality so screen reader users could receive an equivalent information.
Use aria-label to announce information. This is specially important if the process takes time and the screen reader user can't interact. With this information they can know that something is happening.
[!WARNING] Title: Use of aria-label attribute
If the accessible label is included with ariaLabel, it is important to take into account that this attribute replace the link text for screen reader users. In this case it is needed to include the full description of the link in ariaLabel.
Action link
Action links must be mark as buttons through role. This buttons migh need an accessible label depending on the copy.
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 or bold text.
- For the rest of elements at least of 3:1 color contrast ratio is needed.
Size
The area for clicking and tapping links must be large enough. The recommended size of the target for pointer inputs is at least 24x24px and 44x44px for best readability.