Accessible navigation

Basics

  1. Page layouts should be consistent across a site or course.
  2. Make sure menus are accessible and predictable.
  3. Provide descriptive, unique page titles.
  4. Make sure websites have a sitemap.
  5. Use properly nested headings to structure your document.
  6. Write meaningful link text.
  7. Use same-page links for lengthy pages.

In-depth

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
Was this helpful?

 
 

Slack

Accessibility Connections