Operable · 2.2 Enough Time
For each time limit set by the content, users must be able to turn it off, adjust it to at least ten times the default, or be warned before it ends and given at least 20 seconds to extend it with a simple action, at least ten times. Real-time events, essential limits and limits over 20 hours 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.
Start filling in the form and let the timer run low. In Passes a warning offers more time; in Fails the form simply clears.
Enter the details of the person who is travelling.
Enter the details of the person who is travelling.
The tools follow the version you last used.
What happened
Why it passes
Twenty seconds before the end, a warning appears with one button that adds more time. You can extend as often as you need, and what you typed stays in the form.
Why it fails
The time runs out without any warning and there is no way to extend it. The form clears and you have to start again.
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
<!-- Sends the user away after five minutes --><meta http-equiv="refresh" content="300; url=/session-expired">After five minutes the page leaves for the expired screen, whatever the user is doing. There is no warning and no way to turn off or extend the limit.
Passes
Live preview
const LIMIT = 15 * 60 * 1000;const WARN_BEFORE = 2 * 60 * 1000;let warnTimer;function startSessionTimer() { clearTimeout(warnTimer); warnTimer = setTimeout(showTimeoutWarning, LIMIT - WARN_BEFORE);}stayButton.addEventListener("click", async () => { await fetch("/session/extend", { method: "POST" }); timeoutWarning.hidden = true; startSessionTimer();});startSessionTimer();The warning comes two minutes before the end, well over the 20 seconds required, and one press of Stay signed in restarts the full time as often as needed.
Fails
Live preview
function showTimeoutWarning() { timeoutWarning.hidden = false; setTimeout(() => { timeoutWarning.hidden = true; }, 10000);}The warning disappears after 10 seconds. The criterion needs at least 20 seconds to respond, and many people need longer to read the message and find the button.
Passes
Live preview
<div id="timeout-warning" role="alertdialog" aria-modal="true" aria-labelledby="timeout-title" aria-describedby="timeout-text"> <h2 id="timeout-title">Do you need more time?</h2> <p id="timeout-text">You will be signed out in 2 minutes. Your answers are saved.</p> <button type="button" id="stay-signed-in">Stay signed in</button> <button type="button">Sign out now</button></div>The warning stays until the user answers and gives two minutes to do so. Move focus to Stay signed in when it opens, so one key press extends the session.
Why it matters
People who read slowly, use screen readers or switch access, or have cognitive or motor disabilities may need much longer to finish a task. Unexpected time limits can cut them off and lose their work.
W3C: Understanding 2.2.1Level A
Level A is the minimum: failing it can shut some people out completely.
Where it is required
Required where the law names WCAG 2.0 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, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures