Operable · 2.2 Enough Time
When an authenticated session expires, users must be able to sign in again and continue the activity without losing any data they had already entered.
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.
Fill in the claim and wait for the session to end. Sign in again when asked, then check whether your answers are still there.
You are signed in as Maya Patel.
You are signed in as Maya Patel.
The tools follow the version you last used.
What happened
Why it passes
After you sign in again you are back on the same form with everything you typed still in it.
Why it fails
Signing in again brings you back to an empty form, so everything you wrote is lost and you have to type it all 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
const response = await fetch("/api/claims", { method: "POST", body: new FormData(claimForm) });if (response.status === 401) { // Session expired: everything in the form is thrown away location.href = "/sign-in";}When the session has expired, the user is sent to sign in and afterwards has to start the claim again. Everything they typed is lost.
Passes
Live preview
if (response.status === 401) { const draft = Object.fromEntries(new FormData(claimForm)); sessionStorage.setItem("claim-draft", JSON.stringify(draft)); location.href = "/sign-in?next=" + encodeURIComponent(location.pathname);}The answers are saved before the sign-in page opens, and the user is sent back to the same form afterwards (technique G105).
Passes
Live preview
const saved = sessionStorage.getItem("claim-draft");if (saved) { for (const [name, value] of Object.entries(JSON.parse(saved))) { const field = claimForm.elements.namedItem(name); if (field) field.value = value; } sessionStorage.removeItem("claim-draft");}Back on the claim page, every saved answer returns to its field, so the user carries on from where they stopped.
Passes
Live preview
<dialog id="sign-in-again" aria-labelledby="sign-in-title"> <h2 id="sign-in-title">Sign in again to send your claim</h2> <p>You were signed out for your security. Your claim is still on this page.</p> <form id="reauth-form"> <label for="reauth-password">Password</label> <input id="reauth-password" name="password" type="password" autocomplete="current-password"> <button type="submit">Sign in and send claim</button> </form></dialog>Signing in happens in a dialog over the claim, so the form and its answers never leave the page.
Why it matters
People who need more time, including those with cognitive, motor or visual disabilities, may be signed out partway through a task. Losing their input forces them to start over, which can make the task impossible.
W3C: Understanding 2.2.5Level 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