Status messages not programmatically determinable

status/live-overridden

WCAG success criterion: 4.1.3 (level AA)
Outcome class: Automatic. An automated check that can report a confirmed violation.
Area: Accessibility, Technical Robustness
Default severity: medium
axe-core rule: aria-live-region-role

Why we flag this

Screen readers do not announce status messages correctly.

Conflict between role (alert/status/log/timer) and aria-live value.

What the rule checks

Scope. Elements in the accessibility tree with role alert, status or log (explicit or implicit, <output> is status) and an aria-live attribute.

Expectation. Fails for aria-live="off": updates of the status message are not announced. Changing the urgency (alert with polite, status with assertive) is allowed by ARIA and still announced: review. The default urgency, stated or implicit, passes; a log may change its urgency; aria-live on an element without a live role is not this id. Hidden subtrees are out of scope.

Source. WCAG 2.2 SC 4.1.3 Status Messages; WAI-ARIA 1.2 alert, status, log (implicit aria-live) and aria-live

Detection: shared; needs dom, ax_tree.

Failing example

The check reports a violation here. Corpus case aria_dialogs_live_broken, element div#cart-status. The page may contain further findings for other rules.

aria_dialogs_live_broken.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shopping cart - Example shop</title>
</head>
<body>
    <header>
        <p>Example shop</p>
    </header>
    <main>
        <h1>Shopping cart</h1>

        <!-- status/live-overridden: the cart status is switched off -->
        <div id="cart-status" role="status" aria-live="off">2 items in your cart</div>
        <!-- status/live-overridden (review): urgency changed, still announced -->
        <div id="stock-alert" role="alert" aria-live="polite">Only 1 left in stock</div>
        <output id="total" aria-live="assertive">Total: 59 EUR</output>

        <!-- dialog/name-missing and dialog/modal-unmarked: unnamed custom
             dialog without aria-modal -->
        <div id="coupon-dlg" role="dialog">
            <p>Enter your coupon code.</p>
            <button type="button" id="coupon-ok">Apply</button>
        </div>

        <!-- dialog/name-missing and dialog/focusable-missing: open native
             dialog without a name and without anything to focus -->
        <dialog open id="saved-dlg">
            <p>Your cart was saved.</p>
        </dialog>

        <!-- dialog/focusable-missing: named alert dialog, nothing to focus -->
        <div id="timeout-dlg" role="alertdialog" aria-modal="true" aria-labelledby="timeout-title">
            <h2 id="timeout-title">Session ending</h2>
            <p>Your session ends in one minute.</p>
        </div>

        <!-- inert/dialog-inert: an open dialog that is inert -->
        <dialog open inert id="survey-dlg" aria-label="Quick survey">
            <p>How was your visit?</p>
            <button type="button" id="survey-ok">Answer</button>
        </dialog>
        <!-- inert/dialog-inert (review): custom dialog under an inert ancestor;
             without styles it may as well be a closed one -->
        <div inert>
            <div id="help-dlg" role="dialog" aria-modal="true" aria-label="Help">
                <button type="button" id="help-close">Close</button>
            </div>
        </div>
    </main>
    <footer>
        <p>Example shop</p>
    </footer>
</body>
</html>

Passing example

The check passes here and reports nothing. Corpus case aria_dialogs_live_valid. The page may contain further findings for other rules.

aria_dialogs_live_valid.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shopping cart - Example shop</title>
</head>
<body>
    <header>
        <p>Example shop</p>
    </header>
    <main>
        <h1>Shopping cart</h1>

        <!-- Live regions with their default urgency, stated or implicit; a
             log may change its urgency -->
        <div id="cart-status" role="status" aria-live="polite">2 items in your cart</div>
        <div id="stock-alert" role="alert">Only 1 left in stock</div>
        <output id="total">Total: 59 EUR</output>
        <div id="activity" role="log" aria-live="assertive">Coupon applied.</div>
        <!-- aria-live off on an element that is no live region role -->
        <div id="ticker" aria-live="off">Prices include VAT.</div>

        <!-- Named modal dialog with a control, named by aria-labelledby -->
        <div id="coupon-dlg" role="dialog" aria-modal="true" aria-labelledby="coupon-title">
            <h2 id="coupon-title">Coupon</h2>
            <button type="button" id="coupon-ok">Apply</button>
        </div>

        <!-- Open native dialog named by aria-label, with a control -->
        <dialog open id="saved-dlg" aria-label="Cart saved">
            <p>Your cart was saved.</p>
            <button type="button" id="saved-ok">OK</button>
        </dialog>

        <!-- Closed native dialogs are not presented: no name needed, inert is
             harmless -->
        <dialog id="closed-dlg"><p>Not shown.</p></dialog>
        <dialog id="closed-inert-dlg" inert><p>Not shown either.</p></dialog>

        <!-- Inert background content next to the dialog is the intended use -->
        <div id="background" inert>
            <p>Recommended products</p>
        </div>
    </main>
    <footer>
        <p>Example shop</p>
    </footer>
</body>
</html>

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