WCAG 2.2 Demo SuiteRe-authenticating
When an authenticated session expires, the user can continue the activity after re-authenticating without losing any data.
Who this affects
Anyone who takes longer than the session window — disproportionately users with disabilities. Losing a long application form to a timeout is a common and avoidable harm.
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.5
Open the failing example in a new tab
fail.html — the problem
<h1>Apply for a library card</h1>
<!-- FAILURE: when the session expires the user is sent back to sign in, and
everything they typed is thrown away.
This is one of the most damaging failures in real systems, and it falls
hardest on the people least able to absorb it: anyone who types slowly,
reads slowly, navigates by screen reader, or has to stop and find a
document. They are the most likely to hit the timeout AND the most costly
to make start again. -->
<form id="f">
<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="w">Why would you like a card?</label>
<textarea id="w" rows="4"></textarea></div>
<button type="submit" class="button">Submit application</button>
</form>
<p><button type="button" class="button button--secondary" onclick="expire()">Simulate session expiry</button></p>
<div id="out" role="status"></div>Meets 2.2.5
Open the passing example in a new tab
pass.html — the fix
<h1>Apply for a library card</h1>
<!-- FIX: the session can still expire - that is a legitimate security
requirement - but NOTHING THE USER TYPED IS LOST. They re-authenticate in
place and continue exactly where they were.
Implementation patterns that achieve this:
- keep the form data client-side and re-post it after re-authentication
- save a draft server-side on a timer, keyed to the user
- re-authenticate in a dialog over the page rather than navigating away -->
<form id="f">
<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="w">Why would you like a card?</label>
<textarea id="w" rows="4"></textarea></div>
<button type="submit" class="button">Submit application</button>
</form>
<div class="reauth" id="reauth" role="alert" hidden>
<h2 id="reauth-h" tabindex="-1">Please sign in again</h2>
<p>Your session timed out. <strong>Your application has been kept</strong> and will
be exactly as you left it.</p>
<div class="field"><label for="pw">Password</label>
<input type="password" id="pw" autocomplete="current-password"></div>
<button type="button" class="button" onclick="resume()">Sign in and continue</button>
</div>
<p><button type="button" class="button button--secondary" onclick="expire()">Simulate session expiry</button></p>
<p id="out" role="status"></p>How to test it
Fill a long form, let the session expire, re-authenticate, and confirm every entered value is preserved.
-
Automated
Requires an end-to-end session-expiry test.
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.5 Re-authenticating — the W3C explanation, intent and exceptions
- 2.2.5 in the WCAG 2.2 Recommendation — the normative wording