Customized tooltips

Since the writing of this sheet, the ARIA specification has been updated from ARIA 1.0 to ARIA 1.1.

This fact sheet is based on the ARIA 1.0 design from WAI-ARIA Authoring Practices 1.0, and the recommendations below may have to be modified once the ARIA 1.1 design patterns are formalized.

For more information on the changes in the ARIA 1.1 update, see WAI-ARIA Authoring Practices 1.1.

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 is “customized using ARIA” when it 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 major advantage of a custom tooltip over its standard HTML counterpart (title attribute) is that the custom tooltip is also accessible for keyboard users.

Components

Customized tooltip components are shown here because their level of accessibility is considered good or very good.

However, before using them in your project, it is important to check for compliancy with the specifications presented above. Certain components may require some adjustments..

Comments

Add a comment

Required fields are marked *.

Back to top