Go Main page
Go Main page

Web components

cover

components

Tooltip

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

If you have space, it is better to not use tooltips, instead you can provide clear labels and sufficient body text. If you must use tooltips, text should be concise.

Types

Basic

It only contains brief text.

Complex

It contains also a title and a closeIcon. They should behave like a modal [link]. According to WCAG 2.1, components with this behavior have this accessibility recommendations:

  • Can be closed by using the ESCAPE key or close button.
  • Once is open, the pointer can be moved over tooltip content without it disappearing.
  • It remain visible until the user dismisses it.

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. Screen reader and keyboard users should be able to operate with all the interactive elements.

When the user trigger the element that open the component, screen reader users have to be noticed that the tooltip appears and the focus stays trapped in the component untul users close it.

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:

Technical references