2.2.4 Interruptions

WCAG 2.2 · 2.2.4 AAA Operable

What it requires

Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency. An interruption is any content the page pushes at the user without their action — a pop-up dialog, an auto-refreshing page, a chat invitation, a “new content available” banner, an alert that steals focus, or an automatic update that reflows what they were reading. Under 2.2.4 the user must be able to delay or turn these off. The one exception is a genuine emergency, such as a warning about loss of data, network, or safety.

  • People with cognitive or attention disabilities — unexpected content breaks concentration and can make a task impossible to finish.
  • Screen-reader users — a sudden alert or focus change moves the reading point and disorients them about where they are.
  • People who read slowly — auto-refresh or auto-advance can replace content before it has been read.
  • Anyone using speech input or a switch — a dialog grabbing focus forces a context switch that is slow and effortful to recover from.

How to detect it

Checks for interruptions
Check How Tooling
Auto-refresh / reflow Leave a page idle; watch for content that refreshes, advances, or reflows on its own. Manual
Unsolicited pop-ups Note any modal, toast, or chat invite that appears without a user action, and check for a way to dismiss or mute it. Manual
Focus theft With a screen reader and keyboard, confirm new content does not move focus or interrupt the reading point. Keyboard / SR
User control Look for a setting or control to postpone or suppress notifications; confirm only emergencies bypass it. Manual
Automated tools Cannot judge whether content is an interruption or whether the user can control it. axe: no

How to fix it

  1. Remove non-essential automatic interruptions, or hold them until the user is idle or finished.
  2. Provide a control to pause, postpone, or turn off notifications, refresh, and alerts.
  3. Do not move focus to pushed content; surface it politely so assistive tech can choose when to announce it.
  4. Reserve forced interruptions for genuine emergencies (data, security, or safety).

Announce updates without stealing focus by using a polite live region:

<div aria-live="polite" aria-atomic="true">
  <!-- New messages are inserted here; focus stays put -->
</div>

Copy-paste tests

Automated coverage

These axe-core rules flag failures of this criterion: meta-refresh-no-exceptions. Run them via the axe DevTools browser extension or axe-core in CI. Automated tools only catch some failures — they cannot tell whether pushed content is an interruption or whether the user can postpone or suppress it.

Run this in the browser console

interruptions-audit.js 
// Read-only: surfaces likely interruption sources for review.
const suspects = [...document.querySelectorAll(
  'meta[http-equiv="refresh" i], [aria-live="assertive"], [role="alertdialog"], dialog[open]'
)];
suspects.forEach(el => { el.style.outline = '3px solid magenta'; });
console.table(suspects.map(el => ({
  tag: el.tagName.toLowerCase(),
  role: el.getAttribute('role') || '',
  live: el.getAttribute('aria-live') || '',
  meta: el.getAttribute('content') || ''
})));
console.log('Suspected interruption sources:', suspects);

What to check manually: Leave the page idle and confirm nothing auto-refreshes, advances, or pops up without your action — and that a non-emergency interruption offers a way to postpone or turn it off.