Dialog not marked as modal
dialog/modal-unmarked
- WCAG success criterion
- 4.1.2 (level A)
- Outcome class
- Hint only. An automated check that by design reports review hints only: its findings are marked for manual review, never as confirmed violations.
- Area
- Accessibility, Technical Robustness
- Default severity
- low
- axe-core rule
dialog/modal-unmarked
Why we flag this
If the dialog is meant to be modal, screen readers keep reading the content behind it as if it were reachable.
role="dialog" without aria-modal="true"; whether the dialog is meant to be modal only shows in its behavior.
What the rule checks
Scope. Elements with role dialog in the accessibility tree; native <dialog> is out of scope (whether showModal() opened it is not in the markup).
Expectation. Review when role=dialog lacks aria-modal="true": a modal dialog without it lets screen reader users wander into the inert page behind it, but a non-modal dialog rightly omits it, so only a human can tell. aria-modal="true" passes. Hidden subtrees are out of scope.
Source. WCAG 2.2 SC 4.1.2 Name, Role, Value; WAI-ARIA 1.2 aria-modal
Detection: shared; needs dom, ax_tree.
Failing example
The check flags this for review. Corpus case aria_naming_roles. The page may contain further findings for other rules.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ARIA role naming corpus case</title>
</head>
<body>
<main>
<h1>Widgets with role but no accessible name</h1>
<div role="menuitem" tabindex="0"></div>
<div role="slider" tabindex="0" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"></div>
<div role="meter" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"></div>
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
<div role="switch" tabindex="0" aria-checked="false"></div>
<div role="tree" aria-label="Files"><div role="treeitem" tabindex="0"></div></div>
<div role="dialog"></div>
</main>
</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.
<!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.