WCAG 2.2.4 — Interruptions

What this requires

Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency. The criterion targets in-product notifications, marketing pop-ups, "new feature" tooltips, session-warning modals, toasts that appear after another user's action — anything the page initiates that demands the user's attention while they're focused on something else.

How AI coding tools fail this

When asked to "add a notification when a new message arrives", AI tools wire up a toast that appears in the corner without offering any way to suppress notifications for the session. The user is trying to write; the toast pulls focus; the user loses their thread.

The second pattern: "what's new" modals that appear on every login until dismissed, with no setting to opt out for the future. The opt-out is per-modal, not per-user.

The third: marketing-driven interruptions (newsletter pop-ups, referral overlays) layered on top of the product UI. AAA users should be able to turn them off entirely.

Failing examples

A toast that appears with no setting to suppress new toasts:

useEffect(() => {
  const unsub = subscribeToMessages((msg) => {
    toast({
      title: "New message",
      description: `${msg.from}: ${msg.preview}`,
    });
  });
  return unsub;
}, []);

Passing examples

Provide notification preferences and respect them:

useEffect(() => {
  const unsub = subscribeToMessages((msg) => {
    if (!preferences.toastsEnabled) return;
    if (preferences.doNotDisturb) return;
    toast({
      title: "New message",
      description: `${msg.from}: ${msg.preview}`,
    });
  });
  return unsub;
}, [preferences]);

// In settings:
<fieldset>
  <legend>Notifications</legend>
  <label>
    <input
      type="checkbox"
      checked={preferences.toastsEnabled}
      onChange={(e) => setPref("toastsEnabled", e.target.checked)}
    />
    In-app message toasts
  </label>
  <label>
    <input
      type="checkbox"
      checked={preferences.doNotDisturb}
      onChange={(e) => setPref("doNotDisturb", e.target.checked)}
    />
    Do not disturb (suppress all non-essential notifications)
  </label>
</fieldset>

Edge cases

Emergency notifications are exempt. A "your file is being deleted" warning during a destructive action is essential and not optional.
Status messages announced via 4.1.3 with aria-live="polite" are not the same thing as interruptions — they wait for the screen reader to finish what it's saying.
Push notifications at the OS level are subject to OS controls, not 2.2.4 — but in-app notifications the page generates are.
Browser permission prompts the user triggered (e.g. by clicking "Enable notifications") aren't interruptions.
AAA target: most products with a notification surface should provide a mute regardless of AAA status; the criterion just formalises it.

How Jeikin handles this

This is a manual review item. The dashboard records, per notification surface, whether a user-level suppression mechanism exists. The scanner flags toast and modal primitives used without a preference gate as leading indicators, but the review pass is what closes the finding.

References

W3C — Understanding 2.2.4 Interruptions (opens in new tab)