Level AAA

Deep pages in complex sites without breadcrumbs, aria-current, or hierarchical URLs leave users unable to determine where they are in the information architecture

2.4.8 Location

In Plain Language

2.4.8 Location (Level AAA) requires that information about the user's position within a set of web pages is available[1]. The mechanism is any persistent cue that answers "where am I in this site?" -- a breadcrumb trail from the home page to the current page, a navigation menu that marks the current item, a site map that highlights the current page, or a URL structure that mirrors the information architecture.

The failure mode is a deep interior page in a complex site reached via a direct link or search result, where the page offers no breadcrumb, no current-page indicator in the global nav, and a flat URL like /product?id=123. The user has no way to reconstruct the hierarchy above the page, no way to navigate to a sibling, and no orientation for where the content sits in the broader structure.

Why It Matters

  • Users with cognitive and learning disabilities rely on persistent structural cues to build and maintain a mental model of a site. Without them, each page is an island and navigation becomes guesswork[1].
  • Screen-reader users cannot glance at a highlighted nav item. They rely on the programmatic signal -- aria-current="page" on the active link -- which assistive technology announces as "current page" when focus reaches it.
  • A breadcrumb marked up as <nav aria-label="Breadcrumb"> with an ordered list exposes the hierarchy as a landmark, so screen-reader users can jump to it directly and walk the chain of ancestors without hunting through the main nav.
  • A URL structure that matches the information architecture (/products/laptops/x1, not /product?id=123) communicates location in the address bar itself, and gives every user -- including those who arrive via search -- a truncatable path back up the hierarchy.
  • In multi-step flows such as checkout or onboarding, aria-current="step" on the active step of a progress indicator tells both sighted and screen-reader users how far they have come and how much remains.

Examples

Do: Breadcrumb trail showing current location

ThinkPad X1 Carbon

✔ Breadcrumb trail with aria-current on the active page -- users know exactly where they are

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/products/">Products</a></li>
    <li><a href="/products/laptops/">Laptops</a></li>
    <li><a href="/products/laptops/x1/" aria-current="page">
      ThinkPad X1 Carbon
    </a></li>
  </ol>
</nav>
Do: Navigation with current page highlighted

✔ aria-current="page" marks the active item -- screen readers announce it, CSS highlights it

<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/services/" aria-current="page">
      Services
    </a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
</nav>
Don't: No location indicators at all

Our Professional Services

✘ No breadcrumb, no highlighted nav item, no aria-current -- users have no orientation cue

Do: Step indicator in a multi-step process

✔ Step indicator with aria-current="step" -- users know they are on step 3 of 4

<nav aria-label="Checkout progress">
  <ol class="steps">
    <li class="done">1. Cart</li>
    <li class="done">2. Shipping</li>
    <li aria-current="step">3. Payment</li>
    <li>4. Review</li>
  </ol>
</nav>

How to Fix It

  1. Add a breadcrumb on hierarchical pages. Wrap the trail in <nav aria-label="Breadcrumb"> with an ordered list, one list item per ancestor from the home page down to the current page. Apply aria-current="page" to the final link so assistive technology announces it as the current location.
  2. Mark the current item in the global navigation. Put aria-current="page" on the active link in the main nav and style the same state with CSS (for example, [aria-current="page"] { font-weight: 600; }) so sighted users and screen-reader users receive the same signal from the same attribute.
  3. Match URL structure to the information architecture. Serve hierarchical content at hierarchical paths (/products/laptops/x1), not flat query strings. The URL becomes a location cue that survives direct links, bookmarks, and search-result entry.
  4. Use aria-current="step" in multi-step processes. In a checkout, wizard, or onboarding flow, wrap the step list in <nav aria-label="..."> and mark the active step with aria-current="step". Render completed, current, and upcoming steps distinctly.
  5. Set hierarchical page titles. A <title> like ThinkPad X1 Carbon - Laptops - Products - Acme Corp gives location context in browser tabs, history, and screen-reader page announcements without requiring any on-page chrome.
  6. Provide a site map for large sites. A dedicated site map page that enumerates the hierarchy and highlights the current page (when reached from within the site) is one of the sufficient techniques listed under 2.4.8[1].

References

  1. [1] W3C (2023). Understanding Success Criterion 2.4.8: Location. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/location.html ↩ ↩ ↩