Go Main page
Go Main page

Web components

cover

components

Tag

v.1.0.0 | Saturn

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 tag 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.

Usage recommendations

  • The tag text is descriptive.
  • Each tag has to be related to the content that is labelled. This is especially important for screen reader users.
  • If it is not interactive, focus and hover are disabled.
  • Color is not the only visual means of conveying tag categories.

Icon

  • If the icon description is included in the label, icons have to be hidden for screen reader users.
  • If the description it is not included in the label, icons need an accessible text description.

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. If the tag has link or button functionality, apply the accessibility specifications for links or buttons.

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.

Elements that are grouped with others require the user to be able to distinguish each of the elements in the group.

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.

Technical references