Navigation

Designers and developers should consider both site-wide and page navigation.

Site-Wide Navigation

Multiple Ways

In general, provide multiple ways to reach any page on a site. Doing so allows users to chose whatever way of finding pages is easiest for them. Users with low vision may find using search easier than navigating through a large menu. Users with cognitive impairments may prefer a table of contents or site map over clicking through many pages.

Common ways of supporting navigation include:

  • links to related pages
  • tables of contents
  • site maps
  • search
  • linking to all other pages from the home page
  • Pages that are a step in or result of a process need not have multiple ways to reach them.

Navigation Menus

Navigation menus reflect the underlying structures of websites. Development best practices for navigation menus include:

  • Using a navigation landmark and an ARIA label.
  • Using conventional locations for menus, such as across the top of the page or along the left side.
  • Providing a visual heading to label menus.
  • Providing generous sizes for clickable areas, generally no smaller than 44px by 44px.
  • Providing clear styles for hover and current states. Menus often do not have styles for visited states.
  • Ensuring that menus are keyboard operable and focus is never hidden from users.
  • Indicating the current page using a hidden span or aria-current.
  • Designing fly-out menus for screen reader and keyboard users.
  • Avoiding role=menu and role=menuitem unless you are implementing all aspects of the ARIA menu design pattern.

For more, the W3C Web Accessibility Initiative has a comprehensive tutorial for designing and coding menus.

Breadcrumbs

Breadcrumbs are lists of links that present a page’s place in the site hierarchy. They help users find their place within a website. In the DOM, breadcrumbs are typically placed after the main menu and before the document title <h1> heading.

HTML does not have dedicated semantic elements to breadcrumbs. But, developers should follow the ARIA Authoring Practices breadcrumb design pattern.

Page Navigation

Headings

To help screen reader users and users with cognitive disabilities, pages should be organized according to headings. A 2017 WebAIM survey found that most screen reader users prefer headings as their go-to way to find information within a page.

Skip Links

Keyboard users navigate through pages by pressing the TAB key to move focus through each focusable element, such as links and form controls. Navigating through repeated blocks of content on each page, such as headers and menus, can be tedious. Websites should provide skip links to bypass repeated blocks and move focus to each page’s main content.

A page’s skip link should be the first focusable element on the page. It should appear within a landmark, typically the banner landmark. Typically, skip links are only visible on focus and use styles to hide them otherwise.

Landmarks

All content on a page should also be contained within a landmark. Landmarks provide a helpful way of organizing information, and also affords additional skip navigation to screen reader users. To implement landmarks, first divide a page into large perceivable areas. Then, assign landmarks and labels appropriately to each area. Important landmarks include:

  • main (each page should have exactly one main)
  • banner (the page header; each page should have exactly one)
  • contentinfo (the page footer; each page should have exactly one)
  • navigation (if more than one is present, each should have a unique label)

The ARIA Authoring Practices 1.1 document provides a full implementation guide for landmarks, with examples.

To further help users understand the structure of pages within a website, repeated blocks of information (headers, footers, sidebars, navigations) should occur within the same relative order, and should have consistent labels.