Illogical focus order
dialog/focusable-missing
- WCAG success criterion
- 2.4.3 (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, Navigation & Operation
- Default severity
- high
- axe-core rule
focus-order-semantics
Why we flag this
Confusing navigation for keyboard users.
DOM order diverges from the visual order.
What the rule checks
Scope. Open dialogs (role dialog/alertdialog, open native <dialog>) in the accessibility tree.
Expectation. Review when no descendant of the dialog can take focus: keyboard users can neither operate nor close it, unless the dialog takes focus itself and Escape closes it, which the markup does not show. A dialog with an enabled focusable control passes. Closed and hidden dialogs are out of scope.
Source. WCAG 2.2 SC 2.4.3 Focus Order and SC 2.1.1 Keyboard; APG Dialog (Modal) pattern
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.