Tooltip

Accessibility considerations

Discoverability and readability

Ensure that tooltips are discoverable and readable using various input methods, including: Mouse or other pointer devices, keyboard navigation, screen readers, zoom software or any other assistive technology. Users with different abilities should be able to access tooltip content seamlessly.

Informative but non-essential content

Tooltips should provide information that enhances the user’s understanding of the UI but is not strictly necessary for operating it. Avoid critical information in tooltips, as users relying solely on assistive technologies may miss it.

Non-blocking behavior

When a tooltip is open, it should not obstruct the user from performing other tasks on the screen. Test this behavior across all responsive breakpoints to ensure consistent behavior regardless of screen size.

Keyboard interactions

Here's an overview of the common keyboard interactions associated with a tooltip:

WAI-ARIA

In the component itself we use multiple aria-attributes to assure the component works well with a range of assistive technologies. For some attributes however it is not possible for the Design System to add a meaningfull value, because it relies on the context or way a component is used.

Attributes that we recommend you add in certain scenarios are mentioned below.

A tooltip can be linked to another element by either using aria-describedby or aria-labelledby attributes. The choice between the two depends on the context and the relationship between the tooltip and the anchor element.

You can read more on the difference between the two attributes in the MDN article about aria-describedby