WCAG 2.4.8 — Location

What this requires

Information about the user's location within a set of pages must be available. Typical mechanisms: a breadcrumb trail showing the hierarchy from the home page to the current page, an active state on the navigation item that corresponds to the current page, a sitemap that marks the current page, or a clear hierarchical page title.

How AI coding tools fail this

When asked to build a docs site, AI tools generate the page layout but skip breadcrumbs. The user lands on a page two clicks deep and the only orientation they have is the URL.

The second pattern: nav items with no visual or programmatic indication of "active". The same nav appears on every page; the user can't tell which item corresponds to where they are. Active state should be both visual and announced (aria-current="page").

The third: breadcrumb implementations that list every parent but don't include the current page, or list the current page as a link back to itself.

Failing examples

A nav with no active state:

<nav aria-label="Primary">
  <ul>
    <li><Link href="/docs">Docs</Link></li>
    <li><Link href="/docs/guides">Guides</Link></li>
    <li><Link href="/docs/api">API</Link></li>
  </ul>
</nav>

Breadcrumbs missing the current page:

<nav aria-label="Breadcrumb">
  <ol>
    <li><Link href="/docs">Docs</Link></li>
    <li><Link href="/docs/guides">Guides</Link></li>
  </ol>
</nav>

Passing examples

Nav items with aria-current and a visual active state:

<nav aria-label="Primary">
  <ul>
    {items.map((item) => {
      const isActive = pathname.startsWith(item.href);
      return (
        <li key={item.href}>
          <Link
            href={item.href}
            aria-current={isActive ? "page" : undefined}
            className={isActive ? "font-semibold underline" : ""}
          >
            {item.label}
          </Link>
        </li>
      );
    })}
  </ul>
</nav>

Breadcrumbs that include the current page (as text, not a link):

<nav aria-label="Breadcrumb">
  <ol>
    <li><Link href="/docs">Docs</Link></li>
    <li><Link href="/docs/guides">Guides</Link></li>
    <li aria-current="page">Getting started</li>
  </ol>
</nav>

Edge cases

aria-current="page" is the standard signal for assistive tech. Use it on the link that represents the current page. The visual active state is separate but should be paired.
Don't link the current page to itself. In breadcrumbs and in navs, the current page should be plain text or marked aria-current="page" on a non-link element.
Single-page apps need to update active state on route change. Components that read from usePathname() or equivalent will do this naturally; ones that hard-code the active item won't.
Mega menus and accordion navs still need an active path — the visible item, the parent group, and the breadcrumb should all agree.
Combine mechanisms. Breadcrumbs + active nav + descriptive page title is the standard set.

How Jeikin handles this

The scanner records pages where the navigation contains a link to the current page's URL but no aria-current="page" on it. The guided review records whether breadcrumbs are present on hierarchical pages. The dashboard maps each finding to 2.4.8.

References

W3C — Understanding 2.4.8 Location (opens in new tab)