2.4.8 Location

Level: AAA | Principle: Operable | Since: WCAG 2.0 | Automation: Manual

What This Means

Users must be able to determine where they are within a set of pages. This means providing navigation aids like breadcrumbs, site maps, highlighted current items in navigation, or step indicators in multi-step processes.

When a website has many pages organized in a hierarchy, users can easily get lost — especially screen reader users who do not have the same visual overview as sighted users. A breadcrumb trail, a highlighted navigation item, or a "You are here" indicator helps users understand their position within the site structure.

This is particularly important for large sites with deep hierarchies, multi-step wizards, and complex information architectures where users may arrive at a page from a search engine or direct link without context.

Who This Affects

Screen reader users — cannot visually scan the page to understand site structure
Users with cognitive disabilities — need clear indicators of where they are
Users navigating large sites — deep hierarchies are disorienting without location cues
Users arriving from search engines — land on a page with no context of the overall site structure

Common Pitfalls

1. No breadcrumb trail on subpages

<!-- Bad: no location indicator -->
<h1>Running Shoes</h1>
<p>Browse our collection of running shoes.</p>

<!-- Good: breadcrumb navigation shows location -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/shoes">Shoes</a></li>
    <li aria-current="page">Running Shoes</li>
  </ol>
</nav>
<h1>Running Shoes</h1>

2. No visual indicator of current page in navigation

<!-- Bad: no active state on current page -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<!-- Good: current page is marked -->
<nav aria-label="Main navigation">
  <a href="/">Home</a>
  <a href="/about" aria-current="page">About</a>
  <a href="/contact">Contact</a>
</nav>

3. Multi-step process without step indicators

<!-- Bad: no indication of which step the user is on -->
<h1>Shipping Address</h1>
<form><!-- form fields --></form>

<!-- Good: step indicator shows progress -->
<nav aria-label="Checkout progress">
  <ol>
    <li><a href="/checkout/cart">Cart</a></li>
    <li aria-current="step">Shipping Address</li>
    <li>Payment</li>
    <li>Review</li>
  </ol>
</nav>
<h1>Shipping Address</h1>

How to Test

Navigate to several subpages, especially those deep in the site hierarchy.
Check that each page has a location indicator: breadcrumb trail, highlighted current page in the navigation menu, or a step indicator for multi-step processes.
Inspect breadcrumbs for aria-label="Breadcrumb" on the <nav> element and aria-current="page" on the current item.
Check navigation links for aria-current="page" and a visual highlight on the active page.
Pass: Every page shows the user's current location via breadcrumbs, highlighted navigation, or step indicators with proper ARIA attributes.
Fail: Any subpage has no indication of the user's current position within the site structure.

How to Fix

Add breadcrumb navigation to all pages below the top level of the site hierarchy
Mark the current page in navigation using aria-current="page" and a visual highlight
For multi-step processes, add a step indicator showing all steps with the current step highlighted
Include a site map page that shows the full site structure
Use semantic <nav> elements with descriptive aria-label attributes for all navigation aids