Perceivable · 1.4 Distinguishable
Content that appears on hover or focus must be dismissible without moving pointer or focus, unless it hides no other content or reports an input error; hoverable, so the pointer can move onto it; and persistent until dismissed, no longer valid or the trigger is removed. Browser-drawn title tooltips are exempt.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Hover over or tab to “What is a security code?”. Then move the pointer onto the tip, wait a few seconds, and press Escape.
It is the three-digit number printed on the back of your card, next to the signature strip.
It is the three-digit number printed on the back of your card, next to the signature strip.
The tools follow the version you last used.
What happened
Why it passes
The tip stays open while you read it, you can move the pointer onto it, and Escape closes it, so it never has to cover the name field for long.
Why it fails
The tip closes as soon as the pointer leaves the button, vanishes on its own after a moment, and ignores Escape. People using a magnifier lose it before they can read it.
Examples
Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
.tip { display: none; position: absolute; top: calc(100% + 8px);}.help:hover + .tip,.help:focus + .tip { display: block;}The tip shows only while the pointer is on the button, so crossing the 8px gap to reach it hides it. Nothing lets Escape close it either.
Passes
Live preview
const wrap = document.querySelector(".help-wrap");const tip = wrap.querySelector("[role=tooltip]");let hovering = false;const update = () => { tip.hidden = !(hovering || wrap.contains(document.activeElement));};wrap.addEventListener("mouseenter", () => { hovering = true; update(); });wrap.addEventListener("mouseleave", () => { hovering = false; update(); });wrap.addEventListener("focusin", update);wrap.addEventListener("focusout", () => setTimeout(update));document.addEventListener("keydown", (event) => { if (event.key === "Escape") tip.hidden = true;});The button and the tip share one wrapper, so moving the pointer onto the tip keeps it open. It stays until pointer and focus leave, and Escape hides it without moving either.
Fails
Live preview
const button = document.querySelector("#delivery-help");const tip = document.querySelector("#delivery-tip"); button.addEventListener("mouseenter", () => { tip.hidden = false; setTimeout(() => { tip.hidden = true; }, 3000);});The tip disappears after three seconds even while the pointer is still on it. People who read slowly or use a magnifier lose it before they finish.
Passes
Live preview
/* The hint is in the normal flow, so it covers nothing */.hint { display: none; margin-top: 0.25rem;}#new-password:focus + .hint { display: block;}The hint appears on focus and moves the content below it down instead of covering it, so it needs no way to dismiss it. It stays while the field has focus.
Why it matters
People who use screen magnifiers, have low vision or have trouble with fine pointer control can read popups without them covering content or vanishing as they move.
W3C: Understanding 1.4.13Level AA
Level AA is the level most laws and policies require.
Where it is required
Required where the law names WCAG 2.1 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Australia and New Zealand.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures