Skip to main content

Provide Information About User’s Location Within the Site

WCAG 2.1 Ultimate Guide
Disabilities Affected: Cognitive, Visual
Success Criterion: 2.4.8
Level: AAA
WCAG Link
Information about the user’s location within a set of web pages (a website) must be available.

Why It Matters

Knowing where you are within a website structure helps with orientation and navigation. This is especially important on large sites or within complex workflows. Techniques like breadcrumbs or clear navigation highlighting help users understand their current position relative to the rest of the site.

Fixing the Issue

Provide clear indicators of the user’s current location. Common methods include:

  • Breadcrumbs: Display a breadcrumb trail showing the path from the homepage to the current page (e.g., Home > Products > Category > Current Page).
  • Navigation Highlighting: Visually highlight the current page within the main navigation menu (e.g., using a different background color, bold text, or an indicator). Use aria-current=”page” on the link corresponding to the current page for screen reader users.
  • Site Maps: Provide a site map where the current location could potentially be indicated (less common).
  • Clear Headings/Titles: Ensure page titles (WCAG 2.4.2) and main headings (WCAG 2.4.6/2.4.10) clearly identify the current page’s topic and context.

Good Code Example

Using breadcrumbs and aria-current in navigation:

  • <body>
  <header>
    <nav aria-label="Main Navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/accessibility-services/accessibility-monitoring-and-maintenance/" aria-current="page">Accessibility Monitoring and Maintenance</a></li>
        <li><a href="/about/">About</a></li>
      </ul>
    </nav>
  </header>

  <nav aria-label="Breadcrumb">
    <ol>
      <li><a href="/">Home</a></li>
      <li>Accessibility Monitoring and Maintenance</li> </ol>
  </nav>

  <main>
    <h1>Accessibility Monitoring and Maintenance</h1>
    </main>

  <style>
    /* Style for the current page link in navigation */
    nav[aria-label="Main Navigation"] a[aria-current="page"] {
      font-weight: bold;
      text-decoration: none;
      color: black; /* Example style */
      cursor: default;
    }
    /* Basic breadcrumb styling */
    nav[aria-label="Breadcrumb"] ol { list-style: none; padding: 0; }
    nav[aria-label="Breadcrumb"] li { display: inline; }
    nav[aria-label="Breadcrumb"] li + li::before { content: " > "; padding: 0 0.5em; }
  </style>
</body>

  • Accessibility Monitoring and Maintenance

Bad Code Example

A page deep within a site with no indication of location:

  • <body>
  <header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/accessibility-services/accessibility-monitoring-and-maintenance/" aria-current="page">Accessibility Monitoring and Maintenance</a></li>
        <li><a href="/about/">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Details Page Three</h1> <p>Content for a specific detail page...</p>
    </main>
</body>

  • Details Page Three

    Content for a specific detail page…

Search Ultimate Guide
Tablet displaying an eBook cover titled 'Integrating Accessibility Compliance Into Your Budget' by AccessiTREE. The cover features a digital tree with accessibility-related icons, symbolizing inclusive design and compliance.
Free eBook
Integrating Accessibility Compliance Into Your Budget
A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling
Learn More
Need Help with Compliance?
Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.
Schedule Consult