Operable · 2.2 Enough Time
Timing must not be an essential part of any event or activity the content presents. The only exceptions are non-interactive synchronized media, such as a prerecorded video, and real-time events, such as a live auction.
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.
Answer the two questions slowly. In Fails a countdown ends the quiz when the time runs out; in Passes there is no time limit at all.
The museum opens at 10 in the morning and closes at 6 in the evening. Entry is free on Mondays.
The museum opens at 10 in the morning and closes at 6 in the evening. Entry is free on Mondays.
The tools follow the version you last used.
What happened
Why it passes
There is no countdown. You can take as long as you need, and nothing is lost if you stop to think or step away.
Why it fails
When the countdown reaches zero the quiz ends, finished or not, and your answers are lost. There is no way to take it without a time limit.
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
let secondsLeft = 120;const countdown = setInterval(() => { secondsLeft -= 1; clock.textContent = secondsLeft + " seconds left"; if (secondsLeft === 0) { clearInterval(countdown); quizForm.submit(); }}, 1000);The quiz is sent when the countdown ends, finished or not. At this level timing must not be part of the activity, so a quiz with no untimed option fails.
Passes
Live preview
<form id="quiz"> <p>There is no time limit. Take as long as you need.</p> <label for="q1">What time does the museum open?</label> <input id="q1" name="q1" type="text"> <button type="submit">Submit answers</button></form>The quiz ends only when the person sends it, so no one is rushed (technique G5).
Fails
Live preview
// Meets 2.2.1, but still fails 2.2.3function showTimeWarning() { timeWarning.hidden = false; addTimeButton.focus();}addTimeButton.addEventListener("click", () => { secondsLeft += 120; timeWarning.hidden = true;});Letting people add time meets 2.2.1, but they still have to watch the clock and answer each warning. At AAA the time limit itself has to be removable or avoidable.
Passes
Live preview
<fieldset> <legend>How do you want to take the quiz?</legend> <input type="radio" id="mode-untimed" name="mode" value="untimed" checked> <label for="mode-untimed">No time limit</label> <input type="radio" id="mode-timed" name="mode" value="timed"> <label for="mode-timed">Timed, 10 minutes, as exam practice</label></fieldset>The timer is an option the person chooses, and it is off by default, so anyone can take the quiz with no time pressure.
Why it matters
People with cognitive, motor or visual disabilities, and screen reader users, can complete every task at their own pace with no time pressure at all.
W3C: Understanding 2.2.3Level AAA
Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.
Where it is required
No law on this site requires Level AAA criteria for whole sites.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures