Navigation shortcuts

Are navigation shortcuts included for screen reader and keyboard users?

Why it’s important

  • Melanie's vision is fine but has trouble using a mouse, so she navigates the web using only her keyboard – she hates having to tab through all the links in the header navigation to get to the main content of a page.
  • Raoul is blind and uses a screen reader to navigate the web; he uses landmark elements to quickly navigate through sections of a webpage.
  • Rob checks the news on his phone during his morning commute on a busy train, often while drinking from the coffee cup in his other hand.

Next steps

  1. Seek guidance from Developers to identify the basic landmark elements(this link opens an external website) in your wire-frames. If you can use native HTML elements or attribute, then do so, otherwise use ARIA roles. You don’t need to be an expert on HTML or ARIA, as long as you know the basics:
    • header
    • nav
    • main
    • footer
    • search
    • form
  2. Include a “Skip to the main content” link before the header for keyboard users. This helps Keyboard users navigate faster as they can't take advantage of landmark navigation. The skip link can be visually hidden but becomes visible when it has focus(this link opens an external website).
  3. When there is secondary navigation in the page also add another link before the header "Skip to menu for this section" to bypass the main content.

References

Resources

World Content Accessibility Guidelines

Last modified: