2.2.4 Interruptions

What this rule means

WCAG 2.2.4 requires that users can postpone or suppress interruptions such as alerts, notifications, live updates, and other content changes that demand attention. The only exception is for genuine emergencies — warnings about health, safety, or data integrity that require immediate user awareness.

This applies to push notifications, toast messages, chat popups, promotional overlays, system alerts, live content updates, and any mechanism that diverts the user's attention from their current task. Users must have a way to turn these interruptions off, schedule them for later, or prevent them from appearing until they choose to check for updates.

Why it matters

Interruptions are particularly disruptive for users with cognitive disabilities and attention deficit disorders. Each notification or alert forces a context switch that may take significant mental effort to recover from. Users with memory impairments may lose track of what they were doing entirely after being interrupted, having to start their task over.

Screen reader users are especially affected because notifications that trigger ARIA live regions will interrupt whatever the screen reader is currently reading. Even users without disabilities experience reduced productivity and increased stress when subjected to constant interruptions. Research shows it takes an average of 23 minutes to fully recover focus after an interruption.

Related axe-core rules

There are no automated axe-core rules for this criterion. Interruption behavior depends on runtime JavaScript logic, push notification APIs, and server-side event systems that cannot be detected through static DOM analysis.

How to test

Testing requires monitoring the page over time to identify all sources of interruption.

1. Use the application for an extended period and note every notification, alert, popup, or unsolicited content change.
2. For each interruption, check whether a setting exists to turn it off or postpone it.
3. Verify that notification preferences are available and functional (e.g., "Do not disturb" mode).
4. Check that ARIA live regions are used appropriately and can be suppressed by user preference.
5. Test with a screen reader to verify that interruptions can be controlled and do not disrupt reading flow uncontrollably.

How to fix

Provide comprehensive notification preferences that allow users to control when and how they receive interruptions.

Notification preferences

<fieldset>
  <legend>Notification Preferences</legend>

  <label>
    <input type="checkbox" id="notif-enabled" checked
      onchange="toggleNotifications(this.checked)">
    Enable notifications
  </label>

  <fieldset id="notif-options">
    <legend>When enabled, show notifications for:</legend>
    <label>
      <input type="checkbox" name="notif-type"
        value="messages" checked> New messages
    </label>
    <label>
      <input type="checkbox" name="notif-type"
        value="updates"> Content updates
    </label>
    <label>
      <input type="checkbox" name="notif-type"
        value="promotions"> Promotions
    </label>
  </fieldset>

  <label>
    <input type="checkbox" id="dnd-mode"
      onchange="toggleDoNotDisturb(this.checked)">
    Do not disturb mode
  </label>
</fieldset>

Controllable notification system

class NotificationManager {
  constructor() {
    this.enabled = true;
    this.doNotDisturb = false;
    this.queue = [];
    this.allowedTypes = new Set(['messages', 'updates']);
  }

  notify(message, type = 'info', isEmergency = false) {
    // Emergencies always show
    if (isEmergency) {
      this.showNotification(message, 'emergency');
      return;
    }

    // Respect user preferences
    if (!this.enabled || !this.allowedTypes.has(type)) return;

    if (this.doNotDisturb) {
      this.queue.push({ message, type });
      return;
    }

    this.showNotification(message, type);
  }

  showQueued() {
    this.queue.forEach(item =>
      this.showNotification(item.message, item.type)
    );
    this.queue = [];
  }
}

Common mistakes

• Toast notifications that appear automatically with no way to disable them in settings.
• Chat widgets that pop up unsolicited with no preference to suppress them.
• ARIA live regions that announce updates constantly with no user control over the behavior.
• Promotional overlays or banners that appear at timed intervals with no opt-out mechanism.
• Real-time content feeds that push updates without a way to pause or batch them.
• Browser push notifications that are requested immediately on page load without context.