WCAG 2.2.4 Interruptions: Let Users Control Notifications and Alerts

What This Criterion Requires

WCAG 2.2.4 requires that interruptions can be postponed or suppressed by the user, except in emergencies. Interruptions include alerts, notifications, chat popups, cookie consent banners, newsletter signup modals, live chat invitations, and any other content that demands user attention without being explicitly requested. For people with cognitive disabilities, attention deficit disorders, or those using screen readers, unexpected interruptions break concentration, cause disorientation, and can make it impossible to complete tasks. This criterion recognizes that while some interruptions carry useful information, the user should always have control over when and whether they receive them. Meeting this requirement means implementing a 'Do Not Disturb' mechanism, allowing users to suppress non-critical notifications globally, and ensuring that interruptive elements like modals and popups can be permanently dismissed. Emergency interruptions such as imminent data loss warnings, session timeout alerts, or safety-critical notifications are exempt because the immediate need outweighs the disruption. Best practice implementations include notification preference centers, progressive disclosure of non-critical information, and respecting operating system-level notification settings.

Why It Matters

Interruptions are one of the most significant barriers to web accessibility for people with cognitive disabilities and attention-related conditions. When a notification popup appears while someone is filling out a form, a person with ADHD may lose track of where they were. A screen reader user hearing an unexpected alert announced may need to navigate away from their current position to understand and dismiss it, then struggle to find their place again. For users with anxiety disorders, unexpected interruptions can trigger stress responses. People with memory impairments may forget what they were doing after being interrupted. Beyond disability, interruptions affect everyone: research from the University of California, Irvine found that it takes an average of 23 minutes to fully recover focus after an interruption. On modern websites, users can face dozens of interruptions per session: cookie banners, newsletter popups, chat widgets, promotional modals, and push notification requests. Without user control over these interruptions, many people simply cannot use the web effectively. Giving users the power to silence non-emergency interruptions is both an accessibility imperative and a fundamental respect for user autonomy.

Common Failures and How to Fix Them

<div class="newsletter-popup" id="popup">
  <h2>Subscribe to our newsletter!</h2>
  <input type="email" placeholder="Enter email">
  <button onclick="subscribe()">Subscribe</button>
  <button onclick="closePopup()">No thanks</button>
</div>
<script>
  setTimeout(() => showPopup(), 10000);
</script>

<div class="newsletter-popup" id="popup" role="dialog"
  aria-label="Newsletter signup">
  <h2>Subscribe to our newsletter!</h2>
  <input type="email" placeholder="Enter email">
  <button onclick="subscribe()">Subscribe</button>
  <button onclick="dismissForever()">Don't show again</button>
</div>
<script>
  if (!localStorage.getItem('newsletter-dismissed')) {
    setTimeout(() => showPopup(), 10000);
  }
  function dismissForever() {
    localStorage.setItem('newsletter-dismissed', 'true');
    closePopup();
  }
</script>

<script>
  setTimeout(() => {
    openChatWidget();
    playNotificationSound();
    chatWidget.focus();
  }, 30000);
</script>

<script>
  // Chat widget stays minimized until user clicks
  const chatPrefs = getUserPreference('chat-invitations');
  if (chatPrefs !== 'suppressed') {
    // Show subtle, non-intrusive indicator
    showChatBadge();  // Does NOT steal focus or play sound
  }
  // User can suppress future invitations in settings
  function suppressChatInvitations() {
    setUserPreference('chat-invitations', 'suppressed');
    hideChatBadge();
  }
</script>

<div aria-live="assertive" class="promo-banner">
  <p id="promo-text">Summer sale: 30% off!</p>
</div>
<script>
  const promos = ['Summer sale: 30% off!',
    'Free shipping today!', 'New arrivals!'];
  let i = 0;
  setInterval(() => {
    i = (i + 1) % promos.length;
    document.getElementById('promo-text')
      .textContent = promos[i];
  }, 5000);
</script>

<div class="promo-banner">
  <p>Summer sale: 30% off!</p>
  <button onclick="dismissPromos()"
    aria-label="Dismiss promotional banners">
    Dismiss
  </button>
</div>
<!-- No auto-rotation, no aria-live for promos.
     User can dismiss permanently. -->

How to Test

1. Spend at least 2 minutes on various pages and note every interruption that appears without your explicit action (popups, notifications, chat invitations, banners).
2. For each interruption, check whether there is a mechanism to permanently suppress or postpone it, not just close the current instance.
3. Verify that non-emergency interruptions do not use aria-live='assertive', which forces screen readers to announce them immediately.
4. Check that the site provides a notification preferences page or global 'Do Not Disturb' mechanism for non-critical alerts.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Squarespace Accessibility Checklist
• Wix Accessibility Checklist

Further Reading

• Accessible Navigation Guide
• Wcag Explained Plain English
• Screen Reader Friendly Website Guide

Related WCAG Criteria

• WCAG 2.2.1
• WCAG 2.2.2
• WCAG 1.4.13