WCAG 1.4.13 Content on Hover or Focus: Tooltips and Popups

Last updated: 2026-03-22

Level AA Perceivable WCAG 1.4.13

What This Criterion Requires

WCAG 1.4.13 requires that when additional content appears and disappears in response to pointer hover or keyboard focus, three conditions are met: the additional content is dismissible (can be closed without moving the pointer or focus, typically via the Escape key), hoverable (the pointer can be moved over the additional content without it disappearing), and persistent (the content remains visible until the user dismisses it, moves focus or pointer away, or the information is no longer valid). This criterion was added in WCAG 2.1 and applies to tooltips, dropdown submenus, pop-up information panels, and any other content that appears on hover or focus. It does not apply to content whose appearance is controlled by the user agent (such as native browser title tooltips) or to content whose visibility is not triggered by hover or focus. The goal is to ensure that users can read, interact with, and dismiss additional content without it interfering with the underlying page content.

Why It Matters

Content that appears on hover or focus creates significant challenges for several user groups. Users with low vision who use screen magnification may only see a portion of the screen at any time. When a tooltip appears, it may be outside their magnified viewport, and as they move their pointer to read it, it may disappear because the pointer left the trigger element. Users who rely on keyboard navigation need to be able to dismiss unexpected content that may cover the element they were trying to interact with. People with cognitive disabilities may need extra time to read tooltip content and should not have it disappear before they finish. Users with motor impairments may have difficulty holding a pointer steady over a trigger element and need the ability to move to the tooltip content itself. When tooltips and similar content cannot be dismissed, hovered over, or kept persistent, they become barriers rather than helpful additions, obscuring content and interfering with navigation.

Common Failures and How to Fix Them

Tooltip disappears when user moves pointer to read it

A tooltip appears near a trigger element on hover, but disappears immediately when the user moves their pointer away from the trigger toward the tooltip content. Low-vision users using screen magnification cannot read the tooltip.

Inaccessible 
<style>
.tooltip {
  display: none;
  position: absolute;
  background: #333;
  color: #fff;
  padding: 8px;
}
.trigger:hover .tooltip {
  display: block;
}
</style>
<span class="trigger">
  Shipping info
  <span class="tooltip">Free shipping on orders over $50</span>
</span>
Accessible 
<style>
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}
.tooltip {
  display: none;
  position: absolute;
  background: #333;
  color: #fff;
  padding: 8px;
  z-index: 10;
  bottom: 100%;
  left: 0;
}
/* Hoverable: tooltip stays visible when pointer moves to it */
.tooltip-wrapper:hover .tooltip,
.tooltip-wrapper:focus-within .tooltip {
  display: block;
}
</style>
<div class="tooltip-wrapper" tabindex="0">
  Shipping info
  <div class="tooltip" role="tooltip">
    Free shipping on orders over $50
  </div>
</div>

Hover content cannot be dismissed without moving pointer

Additional content appears on hover and covers underlying page content, but there is no way to dismiss it with the keyboard (e.g., pressing Escape). The user must move the pointer to make it disappear, which may not be easy for all users.

Inaccessible 
<div class="info-popup-trigger"
  onmouseenter="showPopup()"
  onmouseleave="hidePopup()">
  More info
  <div id="info-popup" class="popup">Detailed information here...</div>
</div>
Accessible 
<div class="info-popup-trigger"
  tabindex="0"
  onmouseenter="showPopup()"
  onmouseleave="hidePopup()"
  onfocus="showPopup()"
  onblur="hidePopup()">
  More info
  <div id="info-popup" class="popup" role="tooltip">
    Detailed information here...
  </div>
</div>
<script>
  // Dismissible: Escape key closes the popup
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      document.querySelectorAll('.popup').forEach(p => {
        p.style.display = 'none';
      });
    }
  });
</script>

How to Test

  1. Identify all content that appears on pointer hover or keyboard focus, including tooltips, dropdown menus, and information popups.
  2. Hover over the trigger element, then move the pointer to the additional content and verify it does not disappear (hoverable).
  3. Press the Escape key while the additional content is visible and verify it closes without moving the pointer or focus (dismissible).
  4. Hover over or focus on the trigger and verify the content remains visible as long as the pointer or focus stays on the trigger or the content itself (persistent).

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria