Provide Multiple Ways to Navigate Website Pages

Disabilities Affected: Cognitive, Mobility, Visual

Success Criterion: 2.4.5

Level: AA

More than one way must be available to locate a web page within a set of web pages (a website), except where the page is the result or step in a process (like a checkout sequence). Examples include site search, site map, table of contents, or links between pages.

Why It Matters

Different users prefer or require different methods for finding information. Some users rely on navigation menus, others prefer using a search function, while some may find a site map or A-Z index most effective. Providing multiple navigation methods ensures users can find content in the way that works best for them.

Fixing the Issue

Ensure your website offers at least two distinct methods for finding pages. Common combinations include:

Primary navigation menu + Site search functionality.
Primary navigation menu + Site map page.
Primary navigation menu + Table of contents (for long documents).
Contextual links within page content + Site search. Make sure the navigation methods provided are easy to find and use. A site map should list all major sections and pages. Search functionality should be robust and provide relevant results.

Good Code Example

A site typically includes main navigation and a search feature:

Markup

<body>
  <header>
    <nav aria-label="Main Navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About Us</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>

    <form action="/search" method="get" role="search">
      <label for="search-query">Search Site:</label>
      <input type="search" id="search-query" name="q">
      <button type="submit">Search</button>
    </form>
  </header>

  <main>
    </main>

  <footer>
    <a href="/sitemap">Site Map</a>
  </footer>
</body>

Bad Code Example

A website with only one way to find pages (e.g., just previous/next links):

Markup

<body>
  <article>
    <h1>Chapter 3</h1>
    <p>Content of chapter 3...</p>
  </article>

  <nav>
    <a href="chapter2.html">Previous Chapter</a>
    <a href="chapter4.html">Next Chapter</a>
  </nav>
  </body>

Search Ultimate Guide

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