WCAG 2.2 Demo SuiteTiming Adjustable
For each time limit, the user can turn it off, adjust it to at least ten times the default, or extend it with a simple action after a warning with at least 20 seconds to respond.
Who this affects
Users who read slowly, type slowly, use a screen reader to review a form, or need to consult someone before submitting. A silent session timeout that discards a half-completed form is a hard failure.
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 2.2.1
Open the failing example in a new tab
fail.html — the problem
<h1>Complete your booking</h1>
<!-- FAILURE: a hard time limit with
- no way to turn it off
- no way to extend it
- no warning before it expires
- and the user's entered data discarded when it does.
Twenty seconds is compressed for the demo; in the wild this is a
ten-minute checkout hold or a fifteen-minute session timeout. The effect
is identical for anyone who reads slowly, types slowly, navigates by
screen reader, or has to step away - all of whom are disproportionately
disabled users. -->
<p>Your seats are held for <span class="timer" id="t">20</span> seconds.</p>
<form id="f">
<div class="field">
<label for="nm">Name on booking</label>
<input type="text" id="nm" autocomplete="name">
</div>
<div class="field">
<label for="rq">Any access requirements?</label>
<textarea id="rq"></textarea>
</div>
<button type="submit" class="button">Confirm booking</button>
</form>
<p id="msg" role="status"></p>Meets 2.2.1
Open the passing example in a new tab
pass.html — the fix
<h1>Complete your booking</h1>
<!-- FIX: 2.2.1 is satisfied by ANY ONE of three routes. This example takes the
third, which is the one most real systems can implement:
1. Turn it off - let the user remove the limit entirely, or
2. Adjust it - let them set it to at least ten times the default
BEFORE it starts, or
3. Extend it - warn them at least 20 seconds before it expires
and let them extend with a simple action.
The warning is announced through a live region, so a screen reader user
hears it without having to be looking at the timer. -->
<p>Your seats are held for <span class="timer" id="t">30</span> seconds.
<button type="button" class="button button--secondary" id="off">Remove the time limit</button></p>
<div class="warn" id="warn" role="alert" hidden>
<p>Your booking will expire in <span id="w">20</span> seconds.
<button type="button" class="button" id="more">Give me more time</button></p>
</div>
<form id="f">
<div class="field">
<label for="nm">Name on booking</label>
<input type="text" id="nm" autocomplete="name">
</div>
<div class="field">
<label for="rq">Any access requirements?</label>
<textarea id="rq"></textarea>
</div>
<button type="submit" class="button">Confirm booking</button>
</form>
<p id="msg" role="status"></p>
<!-- Exceptions worth knowing: 2.2.1 does not apply where the time limit is
essential and extending it would invalidate the activity - a live auction,
a timed exam - or where the limit is longer than 20 hours. -->How to test it
Find every timer — session timeouts, checkout holds, auto-advancing carousels with forms, quiz timers. Confirm a warning appears with at least 20 seconds to act and a way to extend.
-
Automated
Requires waiting out real timers and observing the warning 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.
Related criteria
In the specification
- Understanding 2.2.1 Timing Adjustable — the W3C explanation, intent and exceptions
- 2.2.1 in the WCAG 2.2 Recommendation — the normative wording