Dialog without an accessible name
dialog/name-missing
- WCAG success criterion
- 4.1.2 (level A)
- Outcome class
- Automatic. An automated check that can report a confirmed violation.
- Area
- Accessibility, Technical Robustness
- Default severity
- high
- axe-core rule
dialog-name
Why we flag this
Screen reader users are not told what the dialog is about when it opens.
Dialog element without aria-label or aria-labelledby pointing to the dialog title.
What the rule checks
Scope. Dialogs in the accessibility tree: role dialog/alertdialog and open native <dialog> (a closed <dialog> is not rendered).
Expectation. Fails when the dialog has no accessible name: a screen reader enters it without knowing what it is about. Names from aria-labelledby or aria-label pass; closed native dialogs and hidden dialogs (also inside an aria-hidden iframe) are out of scope.
Source. WCAG 2.2 SC 4.1.2 Name, Role, Value; WAI-ARIA 1.2 dialog and alertdialog (Accessible Name Required: True)
Detection: shared; needs dom, ax_tree.
Failing example
The check reports a violation here. 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.