WCAG 2.2 Demo SuiteInterruptions
Interruptions can be postponed or suppressed by the user, except those involving an emergency.
Who this affects
Users with attention and cognitive disabilities, for whom a chat pop-up, cookie re-prompt, or promotional modal appearing mid-task destroys their place in it.
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.4
Open the failing example in a new tab
fail.html — the problem
<h1>Write a review</h1>
<!-- FAILURE: three kinds of unrequested interruption, none of which the user
can postpone or suppress:
1. a chat widget that opens itself after a few seconds
2. a promotional banner that appears mid-task
3. an auto-updating "others are viewing" counter in a live region, which
a screen reader announces over whatever the user is doing
For a user with an attention or cognitive disability, each of these
destroys their place in the task. For a screen reader user, the live
region interrupts their reading. There is no setting anywhere to turn any
of it off. -->
<div class="field">
<label for="r">Your review of Tidal Flats</label>
<textarea id="r" rows="6"></textarea>
</div>
<button type="submit" class="button">Post review</button>
<p>Currently viewing this book: <span id="count" role="status">3</span> people</p>
<div class="popup" id="chat" hidden>
<p><strong>Need a hand?</strong> Chat with us now.</p>
<button type="button" class="button" onclick="document.getElementById('chat').hidden=true">Close</button>
</div>Meets 2.2.4
Open the passing example in a new tab
pass.html — the fix
<h1>Write a review</h1>
<!-- FIX 1: a preference that suppresses non-essential interruptions, and it is
ON by default while the user is in the middle of writing something. -->
<div class="prefs">
<h2>Notifications</h2>
<p class="field">
<input type="checkbox" id="quiet" checked>
<label for="quiet">Do not interrupt me while I am writing</label>
</p>
<p class="field">
<input type="checkbox" id="live">
<label for="live">Show live viewer counts (updates automatically)</label>
</p>
</div>
<div class="field">
<label for="r">Your review of Tidal Flats</label>
<textarea id="r" rows="6"></textarea>
</div>
<button type="submit" class="button">Post review</button>
<!-- FIX 2: the live counter is off unless the user asks for it, so nothing is
announced over their typing. When it is on it uses aria-live="polite", so
it waits for a pause rather than interrupting. -->
<p id="viewers" hidden>Currently viewing this book:
<span id="count" role="status">3</span> people</p>
<!-- FIX 3: help is available on request instead of opening itself. -->
<p><button type="button" class="button button--secondary">Chat with us</button></p>
<!-- The exception: EMERGENCY interruptions are allowed and expected - a
message about health, safety, loss of property or loss of data. A warning
that unsaved work is about to be lost is exactly the kind of interruption
this criterion protects.
Everything else - promotions, chat prompts, survey invitations, cookie
re-prompts, "others are viewing" counters - must be postponable or
suppressible. -->How to test it
Confirm a setting exists to suppress or defer non-emergency notifications, pop-ups, and auto-updates.
-
Automated
Requires exercising the interface over time and checking preferences.
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.4 Interruptions — the W3C explanation, intent and exceptions
- 2.2.4 in the WCAG 2.2 Recommendation — the normative wording