2.4.8 Location

What this rule means

WCAG 2.4.8 requires that users can determine their location within a website's structure. This includes knowing which page they are on, where that page sits within the site hierarchy, and how to navigate to related content. Common techniques include breadcrumb trails, highlighted navigation items, site maps, and step indicators in multi-step processes.

This is a Level AAA criterion that builds on the navigation foundations of 2.4.5 (Multiple Ways). While 2.4.5 ensures users can find pages, 2.4.8 ensures users always know where they are.

Why it matters

Users with cognitive disabilities may become disoriented when navigating complex websites. Breadcrumbs and visual location indicators provide constant wayfinding cues that reduce cognitive load. Screen reader users benefit from breadcrumbs because they provide a concise summary of the site hierarchy without requiring exploration of the navigation menu.

Location information also helps all users understand the structure and scope of the site, recover from navigation mistakes, and quickly move to parent or sibling sections.

Related axe-core rules

There are no automated axe-core rules for this criterion. It requires manual review of location indicators.

How to test

1. Navigate to several pages at different levels of the site hierarchy and verify that location information is present.
2. Check that breadcrumb trails accurately reflect the page hierarchy.
3. Verify that the current page is highlighted or indicated in the navigation menu.
4. For multi-step processes, confirm a step indicator shows the current position.

• Verify breadcrumbs use proper semantic markup with nav and aria-label.
• Test with a screen reader to confirm location information is announced.

How to fix

Implement breadcrumb navigation, highlight the current page in navigation, and add step indicators for multi-step processes.

Breadcrumb navigation with schema.org

<nav aria-label="Breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/kb"><span itemprop="name">Knowledge Base</span></a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name" aria-current="page">Location</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

Current page indicator in navigation

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/kb" aria-current="page">Knowledge Base</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<style>
[aria-current="page"] {
  font-weight: bold;
  border-bottom: 3px solid currentColor;
}
</style>

Step indicator for multi-step process

<nav aria-label="Progress">
  <ol>
    <li aria-current="step">
      <span>Step 1: Account details</span>
    </li>
    <li>
      <span>Step 2: Site configuration</span>
    </li>
    <li>
      <span>Step 3: Review and confirm</span>
    </li>
  </ol>
</nav>

Common mistakes

• No breadcrumbs or location indicators on any pages, leaving users without orientation cues.
• Breadcrumbs that do not reflect the actual page hierarchy or show incorrect paths.
• Navigation menus where the current page is not visually distinguished from other items.
• Using aria-current incorrectly or not at all to indicate the current page.
• Multi-step processes without a step indicator showing the user's current position.