Accessible Tooltip Design Guide Based on WCAG 1.4.13: A Practical Approach

Introduction: Why Accessible Tooltips Matter

Tooltips are widely used in user interfaces to provide additional information. However, when not designed properly, tooltips can pose significant barriers—especially for users with visual impairments or those who rely on keyboard navigation. For web administrators in public institutions, web development firms, IT staff in education, and legal or compliance departments, implementing accessible tooltips is essential.

This article offers a detailed explanation of how to design accessible tooltips in line with WCAG 2.1 and 2.2 Success Criterion 1.4.13: “Content on Hover or Focus,” with practical best practices.

Overview of WCAG 1.4.13 and Its Application to Tooltips

Key Requirements of Success Criterion 1.4.13

WCAG 2.1 and 2.2 define three specific requirements for additional content that appears on hover or focus (such as tooltips or submenus):

1. Dismissible: Users must be able to dismiss the tooltip without moving the pointer or focus.
2. Hoverable: The tooltip must remain visible when the pointer is moved over it.
3. Persistent: The tooltip must stay visible until the user dismisses it or moves focus/pointer away.

These conditions are critical to ensuring content is accessible for screen reader users and keyboard-only users.

Principles for Designing Accessible Tooltips

1. Keyboard Accessibility

Tooltips should be accessible not only by mouse but also via keyboard:

• Show on focus: Ensure tooltips appear when the element receives keyboard focus.
• Hide on Escape key: Allow users to dismiss the tooltip using the Escape key.

2. Screen Reader Compatibility

For screen reader users, tooltip content should be announced clearly:

• aria-describedby: Associate the tooltip with its related element for descriptive context.
• role=“tooltip”: Use the appropriate ARIA role so screen readers recognize the tooltip element.

3. Visual Design and Timing Considerations

Visual and behavioral aspects of tooltips affect accessibility:

• Show timing: Introduce a short delay to prevent accidental displays.
• Hide timing: Avoid hiding the tooltip before the user finishes reading.
• Contrast: Ensure sufficient contrast between background and text for readability.

Implementation Example: Accessible Tooltip Code Sample

Here is a basic implementation of an accessible tooltip:

HTML

<button id="tooltip-target" aria-describedby="tooltip">Info</button>
<div id="tooltip" role="tooltip" style="visibility: hidden;">Additional information is shown here.</div>

CSS

#tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  max-width: 200px;
  font-size: 14px;
  z-index: 1000;
}

JavaScript

const target = document.getElementById("tooltip-target");
const tooltip = document.getElementById("tooltip");

function showTooltip() {
  tooltip.style.visibility = "visible";
}

function hideTooltip() {
  tooltip.style.visibility = "hidden";
}

target.addEventListener("focus", showTooltip);
target.addEventListener("blur", hideTooltip);
target.addEventListener("mouseover", showTooltip);
target.addEventListener("mouseout", hideTooltip);
window.addEventListener("keydown", (event) => {
  if (event.key === "Escape") {
    hideTooltip();
  }
});

This implementation supports both keyboard and mouse interaction and allows users to dismiss the tooltip with the Escape key. It also uses appropriate ARIA attributes for screen reader compatibility.

Common Issues and Solutions

Issue 1: Using the title Attribute

Tooltips based on the HTML title attribute are hard to style or control in terms of timing, making them less accessible. Instead, implement custom tooltips using ARIA attributes.

Issue 2: Interactive Content Within Tooltips

Avoid placing interactive elements like buttons or links inside tooltips. If necessary, use more appropriate UI components such as modal dialogs.

Issue 3: Automatic Hiding

Tooltips that disappear before users can read them hinder access. Design tooltips to remain visible until dismissed by the user.

Summary: Key Points for Accessible Tooltip Implementation

To design tooltips that meet accessibility standards:

• Keyboard support: Show on focus, hide on Escape.
• Screen reader support: Use ARIA roles and attributes properly.
• Visual clarity: Ensure good contrast and appropriate display timing.
• Non-interactive content: Avoid interactive elements within tooltips.

By following these best practices, you can create web content that is more usable and inclusive for all users.