Missing location indication (AAA)
navigation/location-missing
- WCAG success criterion
- 2.4.8 (level AAA)
- 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
- low
- axe-core rule
location
Why we flag this
Users lose orientation within nested websites.
Missing breadcrumb navigation or sitemap linkage.
What the rule checks
Scope. Pages with a navigation (nav or role=navigation) that contains links.
Expectation. needs_review once per page (page-level, at the root) when the page has a navigation with links but neither marks the current page (aria-current="page") nor offers a breadcrumb trail (aria-label containing "breadcrumb"). Review, not violation: 2.4.8 can also be met by the title, headings or a site map. A breadcrumb or aria-current="page" passes. Pages without a navigation are not applicable.
Source. WCAG 2.2 SC 2.4.8 Location (AAA); techniques G65 (breadcrumb trail), G128 (indicating current location within navigation)
Detection: shared; needs dom.
Failing example
The check flags this for review. Corpus case interaction_location_missing. 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>Opening hours without a location cue</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; }
</style>
</head>
<body>
<a class="skip" href="#main">Skip to main content</a>
<header><p>Example Museum</p></header>
<!-- needs_review (2.4.8): site navigation, but no breadcrumb and no aria-current="page" -->
<nav aria-label="Main">
<a href="/">Home</a>
<a href="/visit">Visit</a>
<a href="/exhibitions">Exhibitions</a>
</nav>
<main id="main">
<h1>Opening hours</h1>
<p>Open Tuesday to Sunday, ten to six.</p>
</main>
<footer><p>Example Museum footer</p></footer>
</body>
</html>Passing example
The check reports nothing here. Corpus case interaction_location_breadcrumb. 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>Exhibition page with a breadcrumb</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; }
</style>
</head>
<body>
<header><p>Example Museum</p></header>
<nav aria-label="Main">
<a href="/">Home</a>
<a href="/visit">Visit</a>
<a href="/exhibitions">Exhibitions</a>
</nav>
<!-- absent (2.4.8): the breadcrumb trail shows where the page sits -->
<nav aria-label="Breadcrumb">
<a href="/">Home</a> /
<a href="/exhibitions">Exhibitions</a> /
<span>Dutch masters</span>
</nav>
<main id="main">
<h1>Dutch masters</h1>
<p>Forty paintings from the seventeenth century.</p>
</main>
<footer><p>Example Museum footer</p></footer>
<script>
// absent (2.4.1): the skip link is inserted by a script, before the first link
var skip = document.createElement('a');
skip.className = 'skip';
skip.href = '#main';
skip.textContent = 'Skip to main content';
document.body.insertBefore(skip, document.body.firstChild);
</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.