2.4.8 Location

WCAG 2.2 · 2.4.8 AAA Operable

What it requires

Information about the user’s location within a set of related web pages is available. When a site is more than a single page, users should be able to tell where they are in relation to the whole — not just what is on the current page. This is typically met with one or more orientation cues: breadcrumb trails, a site map, a “you are here” indication in navigation (for example marking the current item with aria-current="page"), or a clear, consistent URL and page-title scheme that reflects the site hierarchy. It applies to the page within its set of pages, not to a position within a single long document.

  • People with cognitive and learning disabilities, who can become disoriented in deep or complex sites without persistent location cues.
  • Screen-reader users, who perceive a page linearly and benefit from a programmatically marked current location and a breadcrumb landmark.
  • People with low vision or using magnification, who see only a small slice of the page at a time and lose the sense of where they are.
  • Anyone arriving deep in a site from search or a shared link who needs to orient without browsing from the home page.

How to detect it

Concrete checks
Check How Result
Orientation cue present On a deep page, look for a breadcrumb, site map link, or a marked current nav item. At least one location mechanism should exist.
Current item programmatic Inspect the active nav/breadcrumb item for aria-current="page". Current location is exposed to assistive tech, not colour-only.
Screen-reader review Navigate by landmarks; confirm a breadcrumb nav announces and reads the trail. Location is announced meaningfully.
Zoom / reflow At 200%+ zoom, confirm cues remain visible and usable. Orientation survives magnification.
Automated tools axe and similar scanners cannot judge this. Manual review required — not auto-detectable.

How to fix it

  1. Add a breadcrumb trail on pages below the top level, wrapped in a labelled nav with an ordered list reflecting the hierarchy.
  2. Mark the current page with aria-current="page" in breadcrumbs and primary navigation so the location is exposed programmatically, not by styling alone.
  3. Provide a site map and a consistent, descriptive page-title and URL scheme.
  4. Keep navigation consistent across pages so the “you are here” cue is reliable.
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/standards/">Standards</a></li>
    <li><span aria-current="page">2.4.8 Location</span></li>
  </ol>
</nav>

Copy-paste tests

Automated coverage

There is no fully automated axe-core rule for 2.4.8 Location: a scanner cannot judge whether a page conveys where it sits in a set of pages. Treat this as a manual review, using the console check and steps below.

Run this in the browser console

location-cues-2-4-8.js 
// Read-only: surfaces likely location cues for manual review.
const crumbs = [...document.querySelectorAll('nav[aria-label*="readcrumb" i], nav.breadcrumb, .breadcrumb')];
const current = [...document.querySelectorAll('[aria-current="page"]')];
const sitemap = [...document.querySelectorAll('a[href*="sitemap" i], a[href$="/sitemap"]')];
console.log('Breadcrumb nav:', crumbs.length, crumbs);
console.log('aria-current="page":', current.length, current);
console.log('Site-map links:', sitemap.length, sitemap);
console.table(current.map(el => ({ tag: el.tagName, text: el.textContent.trim().slice(0, 60) })));
[...crumbs, ...current].forEach(el => { el.style.outline = '2px solid magenta'; });
if (!crumbs.length && !current.length && !sitemap.length)
  console.warn('No breadcrumb, aria-current, or site-map cue found — verify location is conveyed.');

What to check manually: confirm the highlighted cue actually reflects this page’s position in the site hierarchy (not a stale or wrong trail), and that a screen reader announces the breadcrumb landmark and the current item meaningfully.