Tooltips simulated using ARIA

Summary

Principle

Tooltips are messages that allow the user to obtain additional information about an item. The message is displayed on hover and also when keyboard focus is on the element.

A tooltip “simulated using ARIA” is not built using the standard HTML code as found in the specification, which is the title attribute.

This code is based on the “Tooltip Widget” design pattern found in the WAI-ARIA 1.0 Authoring Practices of the W3C.

Core HTML base

<a href="#" aria-describedby="extrainfo">[Link text]</a>
<div role="tooltip" id="extrainfo">[Content of the tooltip]</div>

ARIA roles, states and properties

Keyboard interaction

Esc

When the tooltip is visible, this key hides the tooltip.

Expected behavior

Note

The advantage of a tooltip simulated by ARIA over its HTML counterpart (the title attribute) is that the simulated tooltip is keyboard accessible.

Examples of components

The following components are proposed here because their level of accessibility is considered good or very good.

However, before using them in your project, it is important to check that the specifications presented above have been respected. Depending on the version used, the components may need some adjustments before they can be used in your project.

Comments

Add a comment

Required fields are marked *.

Updates

14 October 2019
Remove the request to use the aria-hidden attribute.

Back to top