Provide alternative ways to navigate

Some people prefer to use site menus and links to browse a site, while others prefer to search for specific pages. Search is a common feature of most publishing platforms, including Canvas and OpenScholar. At times, a site map or site outline can work well to provide an overview of site content. Providing navigation options supports different preferences and use cases.

  • Provide a search option. Menus can be difficult to navigate and operate, while search provides direct access to specific information.
  • Provide a site map. A site map can be a useful resource, providing an outline of available content and functionality, as well as direct access to specific pages. Note that it may be necessary to manually create a site map, for example, when using OpenScholar. If you choose to provide a site map, make certain to keep the map updated as you make changes to the site.
  • Ensure all pages are readily reachable. Watch out for pages that are not part of the navigation structure of your site. When you create a new page, make sure it’s reachable through at least two methods, such as in the section menu and through search.

Testing

  • Check whether your site has multiple options for navigation, including search and a site map.
  • Are all pages in your site available through menus or search?

Resources

✎ 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.