Home / Best Practices / Navigation

Navigation

Basics

  1. The layout of elements on a website should be consistent on every page.
  2. Provide descriptive, unique page titles. 
  3. Use properly nested headings to structure your document.
  4. Provide a skip-to-content link at the top of the page.
  5. Write meaningful link text.
  6. Use ARIA landmarks where no equivalent HTML element is available.
  7. Menus should be accessible and consistent throughout the website.
  8. Provide a sitemap.

In depth

Users employ a variety of methods to navigate a website.  People with assistive devices use the page title, "Skip to main content" links, heading lists and shortcuts, lists of all the links on a page, HTML5 and ARIA landmarks, menus and sitemaps to give them information about the page and help them navigate it.

Consistency

Navigating an unfamiliar website can be challenging for anyone, but it is especially difficult when the layout changes from one page to the next.  For users with impairments, inconsistent page layouts can make navigating a site frustrating and even impossible. Users on screen readers benefit greatly when the layout of a website remains the same on every page--with the header, menus, search box, sidebar, footer and other important elements in the same position on each page.

Page titles

Provide descriptive, unique page titles. The <title> element is placed inside the <head> of the page. Although it is not displayed on the page, it is the document title and is displayed above the browser address bar or in tabs, in favorites, and by search engines. In most cases the <title> is the same as the page's <H1> element. (For instance, Drupal uses the page <H1> to auto-populate the <title>.)  

Title displayed in a browser tab

As the first thing screen readers read, page titles should be brief, clear and informative.  Page titles should identify the page content and distinguish it from other pages to minimize confusion and prevent users from getting lost on the site. 

Use headings for logical structure

Headings are about logical structure, not visual effects. Consider these two lists. In the first, the six items appear to be cities:

New York
Albany
Rochester
Washington
Seattle
Spokane

In the second, the six items appear to be two states with two cities under them:

New York

Albany
Rochester

Washington

Seattle
Spokane

HTML headings convey meaning, but only if the text is properly marked up:

  • don't use bold in place of a heading (it may look like a heading, but it has no meaning)
  • don’t skip a level (e.g., don't use an H3 after an H1)
  • don't use headings based solely on their visual appearance (instead, use CSS to alter the look of headings)

Screen readers can generate browsable lists of headings, providing users who are blind with a mental picture of the structure of a page and helping them find content more quickly. Additionally, automated search and analysis engines use heading information to construct an index of a page's contents. For sighted users headings are also important--large blocks of text without headings appear dense and daunting, and many users will simply skip over them.

Text without headings is dense and unstructured      Page with headings is more structured
Example of using headings to organize content and make text more approachable.

There are six levels of headings in HTML: H1-H6. Every page should have one (and only one) H1. Section headings (H2-H6) are used to organize content and should be hierarchical--that is, H2 headings are the second most important heading, while H3 headings are subsets of H2 headings, etc. 

An example of properly nested headings:

<h1>Title of the Page</h1>
   <h2>Section</h2>
      <h3>Subsection</h3>
      <h3>Subsection</h3>
   <h2>Section</h2>
      <h3>Subsection</h3>

Skip-to-content links

A skip-to-content link allows users of assistive technology to bypass all site navigation and proceed directly to the page content.  Place a skip link so it's one of the first elements a screen reader or keyboard-only user comes to on the page. The link text ("Skip to main content" or something similar) should clearly indicate where the link takes the user. The link target should be the beginning of the page's main content.

If you don't like the look of the skip link, hide it with CSS

Meaningful link text

Screen readers are able to create lists of the links found on a page.  Write descriptive text links that will make sense when taken out of context. See more in the guidelines on links.

Document landmark roles

Document landmark roles are an ARIA specification that alert a screen reader user to the major geographic regions on a webpage. See more information on the WAI-ARIA page.

Accessible menus

Menus should be visible to users on screen readers and function using the keyboard (tabbing) only. Fly-out and drop-down menus must be activated on keyboard focus and should remain open until focus has left the submenu. (See the Javascript guidelines for more information.) Users with fine motor difficulties and those using touch screens need menus that don't disappear immediately after the mouse has left the submenu.

Make sure the current page’s menu item is clearly indicated, as is the link that has focus. Screen reader and keyboard users or people with some cognitive or neurological limitations benefit by knowing which link has focus.

Ensure that links are large enough to tap on. Users with fine motor difficulties and those using touch screens need large buttons or links that are easy to click.

Sitemaps

Provide a sitemap. A sitemap outlines the contents and organization of a site. As an overview of the entire site, it helps users understand what content is available on a site and can function as an alternative for complicated or difficult to use navigation menus.

How to test

Consistency

Visit pages from every section of the site.  Are common elements and features in the same location on every page?   Check every feature and element that occurs on most pages: header, "skip to main content" link, search box, primary navigation menu, secondary navigation menu, sidebars, footers and other elements.

Page title

Ensure the page title is brief, clear, informative and unique.

Headings

Skip to main content links

Tab to the "Skip to main content" link.  Check that it has focus, then press the Enter key to ensure it "jumps" to the main content.

Meaningful link text

Tab through the page and ensure that the destination of every link is clear from its link text, even if the link was removed from the content. (See more on accessible links.)

Document landmark roles

To come.  (See more on ARIA landmark roles.)

Accessible menus

  1. Ensure the menu is keyboard accessible:
    • Tab through the menu using the tab, shift+tab and right and left arrow keys.
    • Ensure that submenus open on focus (by pressing the tab, enter or down arrow keys or the spacebar) and that submenus close and focus is restored to the parent menu when focus leaves the submenu (by pressing the escape, up or tab key).
    • Test that submenus can be navigated using tab, shift+tab, or up and down arrow keys. 
  2. Check that links are large enough to be easily clicked.
  3. Ensure that the current page’s menu item is indicated and that each link has focus as you tab through.

Sitemap

  1. Check that the site contains a sitemap and a link to the sitemap exists on every page listed in the sitemap.
  2. On the sitemap, check that each link leads its target page.

Relevant W3C WAI documents

  • WCAG 2.1 Guideline 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
  • How to Meet WCAG 2.1 Guideline 2.4.4