WCAG 2.2 Demo SuiteTimeouts
Users are warned about the duration of any inactivity that could cause data loss, unless the data is preserved for more than 20 hours of inactivity.
Who this affects
Users with cognitive disabilities who may step away and return, and who cannot anticipate an undisclosed timeout.
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.6
Open the failing example in a new tab
fail.html — the problem
<h1>Apply for a library card</h1>
<!-- FAILURE: there is an inactivity timeout that will discard this
application, and the user is never told it exists or how long it is.
2.2.6 is not about the timeout being adjustable (that is 2.2.1) or about
preserving data (that is 2.2.5). It is specifically about DISCLOSURE: the
user must be warned at the START how long they have, so they can decide
whether to begin now or come back when they have time and the documents
they need.
Someone who reads slowly, or who has to fetch proof of address, has no way
to know they should not start this form on a ten-minute break. -->
<form>
<div class="field"><label for="n">Full name</label><input type="text" id="n" autocomplete="name"></div>
<div class="field"><label for="a">Address</label><input type="text" id="a" autocomplete="street-address"></div>
<div class="field"><label for="p">Proof of address reference</label><input type="text" id="p"></div>
<button type="submit" class="button">Submit application</button>
</form>Meets 2.2.6
Open the passing example in a new tab
pass.html — the fix
<h1>Apply for a library card</h1>
<!-- FIX: the duration is disclosed BEFORE the user starts, along with what
will happen and what they should have to hand. Note the placement - at the
top, before the first field, not in a footer or a help page. -->
<div class="upfront">
<h2>Before you start</h2>
<p>This form times out after <strong>20 minutes of inactivity</strong>. If that
happens, you will be asked to sign in again and your answers will be restored.</p>
<p>You will need your proof of address reference to hand.</p>
</div>
<form>
<div class="field"><label for="n">Full name</label><input type="text" id="n" autocomplete="name"></div>
<div class="field"><label for="a">Address</label><input type="text" id="a" autocomplete="street-address"></div>
<div class="field"><label for="p">Proof of address reference</label><input type="text" id="p"></div>
<button type="submit" class="button">Submit application</button>
</form>
<!-- The exception, and it is the better fix where you can take it: 2.2.6 does
not apply at all if user data is preserved for MORE THAN 20 HOURS of
inactivity. Save a draft that survives overnight and you have nothing to
disclose, because nothing is lost.
How the three timing criteria differ:
2.2.1 (A) the limit must be adjustable, extendable or removable
2.2.5 (AAA) re-authenticating must not lose data
2.2.6 (AAA) the user must be TOLD the duration up front
A well-built form satisfies all three, and they are cheapest to build
together rather than retrofitted one at a time. -->How to test it
Confirm the timeout duration is stated up front, at the start of the process — not only in a warning as it expires.
-
Automated
Requires reading the interface for a disclosed duration.
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.6 Timeouts — the W3C explanation, intent and exceptions
- 2.2.6 in the WCAG 2.2 Recommendation — the normative wording