WCAG 2.2.4 Interruptions: How to Prevent Unexpected Disruptions for People

What WCAG 2.2.4 Interruptions means

WCAG 2.2.4 Interruptions says users must not face unexpected or unavoidable interruptions that block them from finishing a task. The rule expects sites and apps to let people postpone, ignore or stop interruptions when those interruptions are not essential. The goal is to protect people who use assistive technology, have low vision, use switched access, or need extra time to react.

Why interruptions cause real harm

• They break a user’s mental flow. Recovering can be hard for people with cognitive disabilities.
• They break keyboard and screen reader workflows when focus jumps or input is lost.
• They cause data loss if forms or shopping baskets are cleared by timeouts or reloads.
• They can be physically impossible to dismiss for switch users or people with slow motor control.

Common sources of interruptions

• Modal dialogs and overlays that open automatically.
• Session timeouts and authentication prompts that sign users out.
• Auto-play audio or video that starts without a pause control.
• Browser permission dialogs and system alerts that steal focus.
• Immediate focus moves after actions, such as shifting focus to a hidden error element.
• Third-party widgets that inject pop-ups or interstitials.

How to meet WCAG 2.2.4 Interruptions

Follow these practical, testable steps. They map to user tasks and can be reviewed during accessibility testing.

1. Ask if the interruption is essential

If it is not essential, do not interrupt. Examples of essential interruptions include immediate safety warnings that need action to avoid harm. If it is essential, explain why and give controls to the user.

2. Make interruptions postponable or dismissible

• Present a clear option to dismiss or postpone the interruption. Use labels such as “Remind me later” or “Continue working”.
• If a timeout will sign a user out, show a persistent warning with a clear “Extend session” button.
• Keep any in-progress data when postponement happens. Do not clear form fields or cart items automatically.

3. Avoid focus stealing

• Do not autofocus elements unless the user explicitly triggered the new content.
• If a modal must open, move focus into the modal and provide a clear, keyboard-focusable close control.
• When the modal closes, return focus to a logical element near where the user was working.

4. Design non-disruptive notifications

• Prefer in-page banners for informational messages rather than modal dialogs.
• For live updates, use ARIA live regions with polite priority so screen readers do not interrupt speech.
• Allow users to hide banners. Keep the control visible and reachable by keyboard.

5. Session timeouts and long-running tasks

• Warn users before ending a session. Provide at least one clear action to extend it.
• Preserve in-progress work on the server or in local storage so users can resume.
• Offer a simple way to continue where they left off after the session ends.

6. Media and auto-play

• Do not start audio automatically. If audio starts, include a visible pause and stop control.
• Ensure media controls are keyboard-accessible and labelled for assistive technology.

7. Third-party content

• Audit third-party widgets for focus behavior and auto-launching content.
• Wrap third-party elements so you can delay or block their automatic actions until the user consents.

Two gaps most guides miss

Here are practical additions that reduce rework and user harm.

A simple decision framework for interruptions

1. Is the interruption essential to prevent immediate harm? If yes, proceed but explain why and offer controls.
2. If no, can the interruption be presented as a non-modal banner or delayed until user action? If yes, do that.
3. If it must be modal, provide options to postpone, dismiss and preserve user input.

Real-world scenario: checkout timeout

Problem: a user reaches payment and a timeout logs them out, clearing the cart. This breaks people using slow input methods.

• Show a visible timeout warning with a single clearly labelled button: “Keep shopping” or “Extend session”.
• Keep the cart and all entered payment details. Save progress server-side or in session storage.
• If the session ends, let the user return to the same checkout step and pick up without re-entering data.

Common implementation notes for developers

• Use role=“dialog” and aria-modal=“true” for modals, but only when a modal is necessary.
• Use inert or aria-hidden on background content when a modal is open to prevent background focus.
• Prefer aria-live=“polite” for non-urgent updates and aria-live=“assertive” only for truly urgent messages.
• Do not rely on focus() to notify users; combine focus management with visible text and accessible names.

How to test interruptions

Use these manual checks and assistive tech tests before signing off.

• Keyboard only: can a user dismiss or postpone every interruption without a mouse?
• Screen reader: with VoiceOver, NVDA or JAWS, does an interruption announce only when necessary and not interrupt speech unexpectedly?
• Slow input: type slowly or use switch device simulation; does the UI preserve work during warnings or timeouts?
• Third-party content: disable the widget and confirm the page still behaves without forced pop-ups.
• Form preservation: submit partially filled forms, trigger a warning, then extend session and confirm data remains.

Common mistakes to avoid

• Auto-opening modals with no cancel control.
• Clearing form or cart data when a session times out without an option to recover.
• Using aria-live assertive for routine notifications so screen reader output is repeatedly interrupted.
• Relying on browser permission dialogs as the only way to notify users about important changes.

Acceptance criteria examples

• A user can postpone or dismiss every non-essential interruption using keyboard only.
• When a session timeout is warned, the user can extend it with a single action and keep entered data.
• When a modal opens, focus moves into it and returns to a logical location after it closes.
• Auto-play media provides visible pause and stop controls and does not start at full volume without consent.

Next steps for teams

• Update your accessibility checklist to include interruption tests.
• Run a focused usability test with screen reader users and people who use slow input methods.
• Fix the highest-impact interruptions first, such as session timeouts and auto-open modals.

If you want, I can convert the decision framework into a short checklist or a set of test scripts you can hand to QA.