Support navigation and wayfinding

Making it easy for people to navigate around a website or application helps everyone find what they need quickly and effectively. Clear wayfinding especially helps people with visual, mobility, or cognitive impairments who may otherwise find it difficult to understand where they are and how to get where they want to go.

When you plan and develop the framework of a website, through templates that will be reused across multiple pages and through site-wide visual design, there are a number of ways you can support easy way finding:

  • Provide consistent, reliable navigation aids on each page so that no matter how a user arrived at a page, they know where they can go from that page.
  • Support navigation through different methods, allowing for preferences for navigation
  • Provide a clear indication of the current location within the site

✎ Technique: Consistent layout

Consistency is one of the cornerstones of good usability. Although it is possible in advanced CMSs to create radically different page layouts according to content type, it's important that areas outside of the page’s content area remain consistent across the site for wayfinding purposes. This can be controlled through carefully designing and implementing page templates.

Example

Imagine that your page layout consists of a navigation area placed at the top of the page, a sidebar for supplementary content on the right, and a larger main content on the left:

Page layout represented by labeled boxes with navigation at the top, with main content (left) and sidebar (right) underneath.

Naturally, the contents within "main content" should vary between pages. In some cases, the supplemental information may change too. However, the navigation should remain consistent across pages. Think of the navigation region as a tool: On any page, the user may want to use this tool, so they'll expect to find it where they left it.

Bad example

Page layout as above but with navigation missing

In this iteration of the original layout, the navigation has been removed. Not only does this remove the user’s primary means to traverse the site, but the radical change in layout might lead them to believe that they've gone to a different website altogether.

Bad example

A page layout where the sidebar has been moved to the left of the main content

In this example, the sidebar has been moved from the right to the left of the main content. Despite all the same information still being present, this rearrangement is likely to be jarring. In the early stages of wireframing, an optimal page layout, centered on the main content, should be decided on and respected throughout the site.

When creating page content, use a consistent layout across pages. For example, if you place links to page sections at the top of one page, make sure you do the same for similar pages.

✎ Technique: Visited links

In long lists of links, it's helpful to show users which links they've already followed so they can focus on unseen content. Browsers do not tend to let you style visited links with anything but the color property.

Examples

Good example

With link styling, as with many aspects of web-interface design, you can aid comprehension by capitalizing on convention. By default, browsers style unvisited links with a #0000EE blue and visited links with a #551A8B purple. These colors will be the easiest identifiers at your disposal.

List of links with visited link using a conventional purple color

Bad example

It is possible to assign a special color to visited text using the :visited pseudo-class in CSS. However, this breaks with convention, so it is not recommended. Different colors may look "nicer," but breaking with convention diminishes comprehension and usability.

List of links with visited link shown in an unconventional grey color

As a content author, avoid applying custom colors to links using the Select Text Color tool. All links should have the same appearance so that users can easily identify them. In addition, applying a link color manually is likely to override and suppress the visited style of the link.

✎ Technique: Site search

People use different methods to find web content. Screen-reader users might prefer navigation regions, people with dyslexia might prefer the logic of a site map, and people with motor impairments might prefer to type in a search term using a search facility.

So it's important the search facility on your site is logically and conventionally placed and constructed for optimal accessibility.

Example

A form field with a placeholder of example chocolate followed by an adjacent search submit button

To maximize comprehension for people scanning the page visually, you should provide a text field with a helpful placeholder and a suitably labelled button (such as "search") rather than a symbol or icon. The search feature should appear above the main content of the page, typically inside or below the page header and navigation.

In terms of markup, there are some specifics you should take into account, as shown in this snippet:


<div role="search">
  <form>
    <label for="search" class="vh">Search the site</label>
    <input type="text" id="search" placeholder="Eg. chocolates" />
    <button type="submit">search</button>
  </form>
</div>
Notes
  • There is a hidden <label> for screen reader users that is announced when they focus the input. This can be hidden using an accessible hiding technique like:

    .visually-hidden {
      position: absolute !important;
      clip: rect(1px, 1px, 1px, 1px);
      padding:0 !important;
      border:0 !important;
      height: 1px !important;
      width: 1px !important;
      overflow: hidden;
    }
    

    Placeholder attributes are not reliably read in assistive technologies, and since the "search" label of the button will not have been focused first, this is the most reliable way to tell the user what the input is for.

  • The search form is placed within a role="search" region. This means screen reader users should be told they are in a search region when they focus the input. It also means that the area will turn up in "landmarks" (regions) navigation dialogs, and it can be reached using keyboard shortcuts such as the "r" key in JAWS.
  • For browsers that support placeholder styling, the text color should be made a darker gray than is often the browser default, allowing for easier reading.

✎ Technique: Site and page navigation

It's important to provide consistent navigation regions to navigate between a site's pages and—where there is a lot content on each page—between sections of pages.

Clear, logical and consistent navigation tools reliably help people find their way to the content they need and recover quickly when they are in the wrong place. This helps everyone but particularly people with visual, cognitive, or motor impairments who might otherwise find it time-consuming to locate the information they need.

Examples

✓ Site navigation

Each page on your site should have the same page-navigation block that’s situated in the same place. Conventionally, navigation often appears at the top of the page or somewhere within the page's header, along with the logo or site name. The order and number of links inside the navigation area should remain the same no matter where users are in the site.

Base the markup on a <nav> element or another element with role="navigation" that contains a list of links:


<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

After entering the navigation block and focusing the first link, screen readers will announce the navigation region, the list of four items, and the currently focused element (the first link).

✓ Page navigation

Websites like Wikipedia list the page’s sections in a separate navigation region that appears below the page's main heading and above its content. So if we were to follow along those lines, in the products page that’s linked to in the previous example, you might see this structure:


<h1>Products</h1>
<nav aria-label="page sections">
  <ul>
    <li><a href="#chocolates">Chocolates</a></li>
    <li><a href="#candies">Candies</a></li>
    <li><a href="#gummies">Gummies</a></li>
  </ul>
</nav>
<h2 id="chocolates">Chocolates</h2>
<!-- chocolates body content -->
<h2 id="candies">Candies</h2>
<!-- candies body content -->
<h2 id="gummies">Gummies</h2>
<!-- gummies body content -->

A few notes:
  • To differentiate this in-page navigation area from the site navigation, this region has the "page sections" aria-label. Screen readers would typically announce "page sections navigation region" when they encounter that.
  • The sections are linked using hash fragments (“#section-name”) and corresponding ids. When a screen reader encounters a link that goes somewhere on the same page, it announces "same-page link."
  • The headings for the subsections are <h2> elements. Because these subsections are immediately under a section that’s labeled with an <h1>, the headings in these subsections must take the next heading level down—in this case, level 2.
  • If you are able to edit the heading code, to better support Internet Explorer you should add tabindex="-1" to each of the target headings. This overcomes a layout bug and makes sure focus is moved to the section.

✎ Technique: Indicating current page location

Users can find their way around a web site more easily and confidently if they know where they are.

This is why websites tend to highlight the navigation-menu item for the current page or section. But to make this information is accessible, we cannot rely on color alone to differentiate that link.

Example

Consider the following image of a navigation menu. The active (current page) link is differentiated with a green background.

Menu of four links. All are blue with black text except the second which is green.

The differentiation is quite clear if you can perceive all colors, but if you have trouble telling the difference between colors, you have to rely on the difference in shade alone. In this case, that difference is very subtle and might be missed:

A menu with four links. The second has a very slightly different shade of grey as the background.

 

So it's important to use an additional means to differentiate the "active" link. One way would be to provide an additional underline:


.active {
  background: #5fd35f;
  text-decoration: underline;
}

With that, there is a supplementary way to differentiate the links. This visual information will also need to be available to people using High Contrast Mode to view web pages or those who apply a custom style sheet to make text easier to read.

A menu with four links. The second has a very slightly different shade of grey as the background and a clear text underline.

Accessibility for screen reader users

Screen-reader users will not be aware of any change in visual design because information about visual appearance is not conveyed by screen readers. So we also need to non-visually indicate that our  .active 

link represents the current page.

One robust and well-supported way to do this is by including some text that is hidden from view but available to screen readers:


<li>
  <a href="/about">about <span class="vh">(the current page)</span></a>
</li>

The vh (“visually hidden”) class would call CSS that removes the content from view but does not also hide it from assistive technologies.

This CSS code can be used to apply this styling:


.vh {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

✎ Technique: Positioned navigation bar

When positioning elements using CSS, it's possible to place them in a position that does not reflect their location in the source order. This can have unexpected side effects for keyboard-navigation users.

Examples

Consider a navigation bar that’s positioned at the top of a web page. It appears first visually because it's a reliable and consistent navigation feature, and something that should be prominent and easy to locate and use.

Bad example

If the author were to position the navigation bar using position: absolute, they’re free to place it anywhere in the markup, even right at the bottom:


  <nav>
    <ul>
      <li><a href="/">home</a></li>
      <li><a href="/about">about</a></li>
      <li><a href="/contact">contact</a></li>
    </ul>
  </nav>
</body> <!-- closing body tag -->

The problem here is that keyboard users navigate pages by moving from one interactive element to the next, in the order they appear in the source. They would have to step through all the interactive elements in the page to reach the navigation bar. So if they landed on a page that they didn't want to read, navigating away from that page would be time consuming (and irritating!).

Good example

Since position: absolute applied is unaffected by the element’s position in the source, one could instead move the navigation bar to the top of the page’s source code, allowing the navigation bar to be focused before the rest of the page:


<body> <!-- opening body tag -->
  <nav>
    <ul>
      <li><a href="/">home</a></li>
      <li><a href="/about">about</a></li>
      <li><a href="/contact">contact</a></li>
    </ul>
  </nav>