WCAG 2.2 Demo Suite

1.4.13 Level AA Guideline 1.4 Distinguishable Added in WCAG 2.1 Not detectable automatically

Content on Hover or Focus

Additional content triggered by hover or focus must be dismissable without moving the pointer or focus, hoverable so the pointer can move onto it, and persistent until dismissed or no longer valid.

Who this affects

Screen magnifier users whose tooltip disappears the moment they move toward it. Users with tremor who cannot hold a pointer steady. Keyboard users trapped by content they cannot dismiss.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 1.4.13

Open the failing example in a new tab

fail.html — the problem

<h1>Membership</h1>

<!-- FAILURE 1 — not hoverable: there is a gap between the trigger and the
     popup, and the popup is only shown while the TRIGGER is hovered. Move
     toward the text and it vanishes. A magnifier user, seeing a small slice of
     the screen at a time, can never read it.
     FAILURE 2 — not dismissable: Escape does nothing, so a keyboard user with
     low vision cannot clear content covering what they were reading.
     FAILURE 3 — not persistent: it is bound to hover only, so it never appears
     for a keyboard user at all. -->
<p>
  Members get
  <span class="tip-wrap" tabindex="0">
    <u>priority reservations</u>
    <span class="tip">Members can reserve up to five titles at once and collect
      them within fourteen days rather than seven.</span>
  </span>
  and free delivery.
</p>

<!-- FAILURE 4: a "toast" that covers the page controls and disappears on a
     timer, giving a slow reader no chance and no way to dismiss it early. -->
<p><button type="button" class="button" onclick="toast()">Save preferences</button></p>
<div id="toast" style="display:none;position:fixed;left:1rem;bottom:1rem;background:#14171c;
     color:#fff;padding:.9rem 1.1rem;border-radius:6px;">Preferences saved.</div>

Meets 1.4.13

Open the passing example in a new tab

pass.html — the fix

<h1>Membership</h1>

<!-- The three requirements, all satisfied:
       DISMISSABLE - Escape closes it, without moving the pointer or focus.
       HOVERABLE   - the popup touches the trigger and stays open while the
                     pointer is over EITHER, so you can move onto it and read.
       PERSISTENT  - it stays until dismissed, focus moves away, or the
                     information becomes invalid. No timer.

     aria-describedby ties the description to the trigger, so a screen reader
     user gets the content without needing the popup at all. -->
<p>
  Members get
  <span class="tip-wrap">
    <button type="button" class="link-like" id="trigger" aria-describedby="tip"
            style="font:inherit;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;">
      priority reservations</button>
    <span class="tip" id="tip" role="tooltip" hidden>Members can reserve up to five titles at
      once and collect them within fourteen days rather than seven.</span>
  </span>
  and free delivery.
</p>

<!-- FIX: the confirmation is a persistent status message with its own dismiss
     control, not a disappearing toast. It is in a live region so it is
     announced (4.1.3), and it does not cover anything. -->
<p><button type="button" class="button" onclick="save()">Save preferences</button></p>
<div id="saved" role="status"></div>

How to test it

Hover over each tooltip or popover: press Escape (must dismiss), move the pointer onto the popup (must stay open), and wait (must not vanish on a timer). Repeat with keyboard focus.

  • Automated

    Requires interactive testing of hover and focus behaviour.

    No axe rule maps to this criterion. It has to be checked by a person.

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification