Operable · 2.2 Enough Time

Timeouts WCAG 2.2.6 · Level AAA

If user inactivity could cause data loss, users must be told how long they can be inactive before that happens. This is not required when the data is preserved for more than 20 hours without any user action.

Level
AAA
Since
WCAG 2.1
Principle
Operable
Guideline
2.2 Enough Time
Try the live demo All criteria Checklist

Live demo

Know how long you can pause

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.

Read the page, fill in a field or two, then let the time run out. Compare what each version told you and what it kept.

Live example

Passes

Apply for a parking permit

Tell us who you are and where you live.

This form times out after 30 seconds. Your answers are saved as you type and kept for 30 days, so a timeout never loses them.

What happened

    Why it passes

    Before you start, the page tells you when it times out and that your answers are kept for 30 days, so you can take a break without worry.

    Why it fails

    Nothing tells you there is a time limit. When it runs out, everything you typed is gone.

    Examples

    Code that fails, and the fix

    Three examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    Fails

    Form cleared after an unstated idle time

    Live preview

    JavaScript
    // Clears the application after 20 idle minutes; the page never says solet idleTimer;function restartIdleTimer() {  clearTimeout(idleTimer);  idleTimer = setTimeout(() => permitForm.reset(), 20 * 60 * 1000);}permitForm.addEventListener("input", restartIdleTimer);restartIdleTimer();

    After 20 minutes without activity everything typed is erased, and nothing told the user that a break of that length would cost them their work.

    Passes

    Time limit stated before the form

    Live preview

    HTML
    <p class="time-notice">  You can take breaks. If you do nothing on this page for 20 minutes,  your answers will be cleared and you will need to start again.</p><form id="permit-form">  <label for="full-name">Full name</label>  <input id="full-name" name="full-name" type="text" autocomplete="name"></form>

    The limit is stated before the form starts, so people can plan a break or finish in one sitting.

    Passes

    Draft kept in the browser with no expiry

    Live preview

    JavaScript
    const DRAFT_KEY = "parking-permit-draft";const saved = JSON.parse(localStorage.getItem(DRAFT_KEY) || "{}");for (const [name, value] of Object.entries(saved)) {  const field = permitForm.elements.namedItem(name);  if (field) field.value = value;}permitForm.addEventListener("input", () => {  const fields = Object.fromEntries(new FormData(permitForm));  localStorage.setItem(DRAFT_KEY, JSON.stringify(fields));});permitForm.addEventListener("submit", () => localStorage.removeItem(DRAFT_KEY));

    Answers are saved on this device as the user types and restored on the next visit. Data kept for more than 20 hours needs no timeout notice.

    Why it matters

    Who it helps

    People with cognitive disabilities, and anyone who needs breaks, can plan their time or finish in one sitting when they know in advance how long they can pause without losing work.

    W3C: Understanding 2.2.6

    • Level AAA

      Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.

    • In WCAG versions

      Added in WCAG 2.1 in June 2018, and kept in 2.2.

      No WCAG 1.0 checkpoint maps to it.

    • Where it is required

      No law on this site requires Level AAA criteria for whole sites.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Find processes where inactivity could lose data, such as long forms, checkouts or unsaved drafts.
    2. Confirm the page states how long the user can be inactive, preferably at the start of the process.
    3. If there is no such notice, confirm the entered data is kept for more than 20 hours without user action.

    Common failures

    Where it breaks

    • A multi-page application discards progress after 30 minutes of inactivity without ever stating the limit.
    • A shopping cart or draft is cleared after a period of inactivity that is never disclosed to the user.

    On the Accessibility Checklist

    Related