Skip to content Skip to navigation

Keyboard Access

Assuring keyboard access means that all functionality on your website needs to be operable using only the keyboard. In addition, when a function has focus, it needs to be visually apparent.

Who Does Keyboard Access Help?

  • People with a physical or motor disability, such as quadriplegia, RSI, or Parkinsonís disease, might not be able to control a mouse or other pointing device.
  • People who are blind cannot use a mouse/pointing device that requires eye-hand coordination.
  • People who have low vision sometimes have difficulty seeing the cursor and find it easier to track where they are if they use the keyboard.

What Does Keyboard Access Mean?

In general, the tab key is used to move forward from function to function, and Shift+tab is used to move backwards. The Enter key is used to activate functions, such as links and buttons. Often, the "escape" key is used to exit.

It is also important that the keyboard focus doesn't become trapped or stuck at one page element. This can happen with third-party widget plug-ins that are not built with accessibility in mind, or it can happen with widgets that you may build. Difficulty arises when the user cannot return to content outside of the plug-in. As a result, whenever you are using Javascript, or other programmatic functionality that requires a mouse, alwaystest it with the keyboard, too.

The following are some examples of interactions that require thought when planning for keyboard access:

  • Carousels
  • Menus
  • Multimedia Player Controls
  • Multi-select/combo boxes
  • Popup windows, modal dialogs, lightboxes
  • Tabs

It's worth noting that there sometimes is not a single recommended way to interact with this kind of functionality using the keyboard. As a result, it is best to examine samples built with accessibility in mind, so that you can follow best practices. As a designer/developer, it's most important to choose an approach, and be consistent throughout your website.

How to Check

If you are using a Mac, you'll need to enable full keyboard access. Roger Johansen's article will help get you started: Enabling keyboard navigation in Mac OS X Web browsers 456 Berea Street.

To check whether your pages are operable using keyboard-only, put your cursor at the end of the web address in your browser's address bar and press the tab key. You should be able to get to all elements, including links, form fields, buttons, and media player controls. You should also be able to tab away from all elements, including dialog boxes and plug-ins. Finally, you should be able to activate a "close" button and/or use the "escape" key to exit widgets, such as modal dialogs/lightboxes.

Target Audience: 
Developer
Last modified: 
April 22, 2015