Read time: 1 minute

Have you included navigation shortcuts for screen reader and keyboard users?

  • Arjun has gigantism due to a tumor on his pituitary gland during childhood. Arjun has very large hands which makes small links, or links that are too close together difficult to tap on mobile.
  • Rosa checks the latest news on her phone during her morning commute on a jostling bus, often while sipping from the coffee cup in her other hand.

Steps to take

  1. Work with your front end designer to identify the basic landmark elements in your wireframes, particularly for complex layouts. Landmark elements are identified either through HTML5 semantic markers or through ARIA roles when HTML can’t identify something. 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 main content” link before the header for keyboard users. Keyboard users can’t take advantage of landmark navigation so a skip link helps them navigate more quickly. This link can be visually hidden but should become visible when it has focus.
Page last updated: 22 June 2021