auditmysitev2.0.2

Non-suppressible interruptions (AAA)

manual/interruptions

WCAG success criterion
2.2.4 (level AAA)
Outcome class
Manual. A tool cannot decide this check. The audit only points a person at it; it is never counted as automatically verified.
Area
Accessibility, Navigation & Operation
Default severity
low
axe-core rule
no-interruptions

Why we flag this

Users with cognitive impairments or screen reader users are distracted.

Unexpected dialogs or assertive live regions.

What the rule checks

Scope. Pages with a dialog element, a live region (aria-live other than off, role alert/alertdialog/status/log/marquee/timer) or a meta refresh.

Expectation. One needs_review (UNTESTED) note per page, at the root, when the page has something that can interrupt; never pass or violation. A role="dialog" div is not among the signals, a native dialog element is. Pages without any signal get no note.

Why a person has to decide. Whether updates and pop-ups can be postponed or suppressed depends on behaviour over time that no document shows.

Source. WCAG 2.2 SC 2.2.4 Interruptions (AAA)

Detection: shared; needs dom.

Failing example

The check flags this for review. Corpus case interaction_dialog_native. The page may contain further findings for other rules.

interaction_dialog_native.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cookie consent dialog</title>
    <style>
        body { font-family: sans-serif; margin: 0; padding: 16px; color: #111; background: #fff; }
        a, button { display: inline-block; min-width: 44px; min-height: 44px; padding: 12px; box-sizing: border-box; margin: 4px; }
        .skip { position: absolute; left: -9999px; }
        .skip:focus { left: 16px; }
        .panel { border: 1px solid #333; padding: 16px; margin: 16px 0; }
    </style>
</head>
<body>
    <a class="skip" href="#main">Skip to main content</a>
    <header><p>Example Garden</p></header>
    <nav aria-label="Main">
        <a href="/" aria-current="page">Home</a>
        <a href="/plants">Plants</a>
    </nav>
    <main id="main">
        <h1>Summer pruning</h1>
        <p>Cut back lavender after flowering.</p>

        <!-- needs_review (2.1.2): a native dialog that a script opens with showModal() after load -->
        <dialog id="dlg-native-modal" aria-labelledby="dlg-native-modal-title">
            <h2 id="dlg-native-modal-title">Cookie settings</h2>
            <p>We only use cookies that the site needs.</p>
            <button type="button">Accept</button>
            <button type="button">Settings</button>
        </dialog>
    </main>
    <!-- Outside every landmark, but inert behind the open modal: nobody reaches it, so it is
         not content-outside (#783). -->
    <div class="promo"><p>Seeds half price this week.</p></div>
    <footer><p>Example Garden footer</p></footer>

    <script>
        document.getElementById('dlg-native-modal').showModal();
    </script>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.