Understanding WCAG SC 2.4.5 Multiple Ways
Version and Level: 2.0/2.1/2.2 (Level AA)

WCAG SC 2.4.5 Multiple Ways requires that more than one way is available to locate a web page within a set of web pages, except where the web page is the result of, or a step in, a process. For example, in a Google search, we can’t really know the destination link and therefore can’t provide a second way. Every user has their own way to move between pages and access content on the website. Some prefer a navigation bar, some prefer to use a search box to skip the navigation process, and some prefer to read page by page sequentially to understand the structure better. By providing more than one way, we expand the ease of navigation for users.

Benefits:

  1. Enhanced Navigation for Visually Impaired Users: Users who are blind or have low vision can benefit from search functionalities over navigating large menus.
  2. Improved Orientation for Cognitive Disabilities: Users with cognitive disabilities can use tables of contents or site maps to get an overview of the site.

Main Objective:

To ensure that users can locate content using more than one method, providing as many ways as possible would be great, but aiming for at least two ways is a good start.

Best Practices:

  • Provide search functionality: Provide a search functionality to help users quickly find content.

  • Include a site map or table of contents: Include a site map or table of contents for an overview of the site.

  • Use navigation menus:Use navigation menus to categorize and link to content (header nav, footer nav).

  • Implement breadcrumb navigation: Implement breadcrumb navigation to help users understand their location within a site’s structure.

  • Offer next and previous page links: Offer next and previous page links for users who read the website in a sequential manner.

  • Provide important links in the footer: Provide important links in the footer to ensure they are always accessible.

Examples & Explanation:

Example: Providing Multiple Navigation Methods

What Should Be Avoided

A website only includes a primary navigation menu with no other ways to locate content, making it difficult for users who prefer different navigation methods.

HTML/CSS

              <nav>
                <ul>
                  <li><a href="home.html">Home</a></li>
                  <li><a href="about.html">About</a></li>
                  <li><a href="services.html">Services</a></li>
                  <li><a href="contact.html">Contact</a></li>
                  <li><a href="blog.html">Blog</a></li>
                  <li><a href="portfolio.html">Portfolio</a></li>
                  <li><a href="faq.html">FAQ</a></li>
                  <li><a href="testimonials.html">Testimonials</a></li>
                  <li><a href="careers.html">Careers</a></li>
                  <li><a href="privacy.html">Privacy Policy</a></li>
                </ul>
              </nav>

Explanation:The website relies solely on a primary navigation menu, limiting the ways users can find content. This can be cumbersome for users who prefer other methods of navigation, such as search or site maps.

What Should Be Done

A website includes a primary navigation menu, a search bar, a site map, and breadcrumb navigation.

HTML/CSS

              <nav>
                <ul>
                  <li><a href="home.html">Home</a></li>
                  <li><a href="about.html">About</a></li>
                  <li><a href="services.html">Services</a></li>
                  <li><a href="contact.html">Contact</a></li>
                  <li><a href="blog.html">Blog</a></li>
                  <li><a href="portfolio.html">Portfolio</a></li>
                  <li><a href="faq.html">FAQ</a></li>
                  <li><a href="testimonials.html">Testimonials</a></li>
                  <li><a href="careers.html">Careers</a></li>
                  <li><a href="privacy.html">Privacy Policy</a></li>
                </ul>
              </nav>
              
              <form action="/search" method="get">
                <label for="search">Search:</label>
                <input type="text" id="search" name="search">
                <button type="submit">Search</button>
              </form>
              
              <a href="sitemap.html">Site Map</a>

Explanation:The website provides multiple ways to locate content, including a primary navigation menu, a search bar, and a site map. This approach accommodates various user preferences and enhances overall accessibility.

Next Up

Enhance your knowledge with SC 2.4.6 - Headings and Labels. Learn to make headings and labels clear for all users.

Go to SC 2.4.6