Keyboard accessibility

Keyboard Accessibility

What does keyboard accessibility mean?

Many people don’t use a mouse:

  • Users who are blind and use screen reader software
  • Some users with low vision
  • Users with injuries or conditions that affect hand and wrist mobility
  • Users with paralysis

Instead of a mouse, they use their keyboard to navigate through websites.

How does keyboard-only navigation work?

There are a number of keys that users can use to navigate. The most important one for you to remember is the Tab key. The Tab key should take users to all of the interactive elements on a web page:

  • Links
  • Menus
  • Buttons
  • Pop-ups
  • Form fields

Keyboard short-cuts to remember:

  • Tab: Move forward through all interactive elements (Note: Mac users may need to enable this feature.)
  • Shift + Tab: Go backwards to a previous interactive element
  • Enter: Select or activate an interactive element
  • Spacebar: To expand a drop-down menu, or select a radio button.
  • Up and down arrows: to scroll through a page, or navigate through options in a drop-down menu
  • Esc: to exit a dialog box or pop-up

What to look for

You should conduct a simple keyboard test to ensure your content is accessible for all users. Hide your mouse (trust us) and use the Tab key to go through your web page. Use your arrow keys to test drop-downs and the Enter key to test actions.

Crucial features:

  1. Can you get to all interactive elements on the page?
  2. Can you Tab both forwards and backwards (Shift-Tab) through all interactive elements?
  3. Do you get stuck anywhere? A keyboard trap is when you can Tab into an element but you can’t get out of it.
  4. Can you dismiss pop-ups?
  5. Does the Tab order make sense? Tabbing forward should take you from top to bottom and left to right. You should not jump around the page haphazardly.
  6. Can you see where you are on the page at all times? This is called a “focus indicator” and often appears as a faint outline.

Best practices:

  • A “skip to main content” link at the top of your page allows keyboard-only users to skip past the header content and menu to go to the body content. Otherwise, they would have to Tab through all the repetitive menu items on every page of your site.
  • Quick links (or jump links) act as a table of contents at the top of your page and allow all users to go directly to the content they want. These are recommended for lengthy web pages.

More resources

Keyboard access (video 4:06)

Topic 7 / Keyboard Access and Visual Focus Indicators [Open Captioned Video] [4:06 min]


Was this page helpful?

Tell us what you think.