2.2.4 Interruptions

Level: AAA | Principle: Operable | Since: WCAG 2.0 | Automation: Manual

What This Means

Users must be able to postpone or suppress all interruptions, except those involving an emergency. Interruptions include things like notifications, chat popups, alerts, auto-updating content, promotional banners, and any content that appears without the user requesting it.

Emergencies are defined as situations where immediate action is needed to protect health, safety, or property — such as a civil emergency alert or a critical system failure warning. Everything else must be deferrable.

People with attention deficit disorders, cognitive disabilities, or those using screen readers can lose their place entirely when an unexpected interruption occurs. A notification popping up can cause a screen reader to jump to the new content, making the user lose track of where they were.

Who This Affects

Users with attention deficit disorders — interruptions break focus and make it hard to return to the task
Screen reader users — unexpected content changes can cause the reader to jump to a new location
Users with cognitive disabilities — interruptions are disorienting and increase cognitive load
Users with anxiety — unexpected popups and notifications create stress

Common Pitfalls

1. Auto-appearing chat widgets

<!-- Bad: chat popup appears automatically after 10 seconds -->
<script>
  setTimeout(() => {
    document.getElementById('chat-widget').style.display = 'block';
  }, 10000);
</script>

<!-- Good: chat is available but does not auto-open -->
<button aria-label="Open chat support" onclick="openChat()">
  Chat with us
</button>
<div id="chat-widget" hidden role="dialog" aria-label="Chat support">
  <!-- chat content -->
</div>

2. Push notifications with no preference control

<!-- Bad: notifications appear with no way to suppress them -->
<div class="notification-banner" aria-live="assertive">
  New message from support!
</div>

<!-- Good: user controls notification preferences -->
<div role="group" aria-label="Notification preferences">
  <label>
    <input type="checkbox" id="enable-notifications"> Enable notifications
  </label>
</div>
<div id="notifications" aria-live="polite" hidden>
  <!-- notifications only appear when user has opted in -->
</div>

3. Auto-updating content that steals focus

<!-- Bad: news ticker that auto-updates and announces aggressively -->
<div aria-live="assertive" class="news-ticker">
  Breaking: Market update...
</div>

<!-- Good: user-controlled updates -->
<div class="news-section">
  <p>Latest news as of <time>10:00 AM</time></p>
  <button onclick="refreshNews()">Refresh news</button>
  <div id="news-content">Market update...</div>
</div>

How to Test

Use the site for several minutes and note any content that appears without user action: chat popups, notification banners, promotional modals, toast messages, auto-updating tickers.
For each interruption found, check whether a mechanism exists to suppress or postpone it (a settings toggle, dismiss button, or notification preferences panel).
Verify that only genuine emergency alerts (health, safety, property) bypass the suppression setting.
Open a screen reader and confirm that interruptions do not steal focus or cause the screen reader to jump to unexpected content.
Pass: All non-emergency interruptions can be postponed or suppressed by the user, and a preference mechanism is available.
Fail: Any non-emergency content (chat popups, promotions, notifications) appears automatically with no way to suppress it.

How to Fix

Add a global notification preference setting that lets users disable all non-emergency interruptions
Do not auto-open chat widgets, promotional banners, or newsletter popups
Use aria-live="polite" instead of assertive for non-critical updates
Store user preferences so they persist across sessions
Reserve aria-live="assertive" and unsuppressable alerts exclusively for genuine emergencies