This post is part of series on Universal Design at Salesforce.com. As always, all of the content and images in these posts fall under our safe harbor agreement.

Include Keyboard Interactions in your Design Specifications

Probably the most important universal design guideline is the suggestion to include interaction designs for keyboard only use. This applies even if you are creating touch based content, since accessibility tools such as iOS VoiceOver and the Android Eyes-Free keyboard will take advantage of these interaction patterns.

Consider...

  • how someone will interact with your interface while only using the keyboard.
  • where keyboard focus must be to open an interface component such as a menu, modal, tab, or hover region. 
  • where the keyboard focus returns, once a component is closed or exited.

This style guide for keyboard interactions of common interface components will help you with many of these questions.

In the examples below, two types of keyboard interactions are detailed. The first example includes detailed tab key order through a section of the interface. Notice how TAB 4 and TAB 6 focus on areas with no visual content. In the mouse based interaction, an icon appears when the mouse hovers over the row. The icon can be clicked to perform an action.

Pinning_tabs

In the second example, notice how the icon appears when the user tabs to the region labeled as TAB 2. The enter key opens a menu, and the up and down arrow keys will move the focus throughout the menu. The enter key will select a menu option.

Pinning_menu

Although many UIs made today provide only mouse based interaction, many users prefer a hybrid approach to using applications.  

Consider a standard login screen. Perhaps this is how you typically login to a website or a workstation:

  1. Mouse to the username field and click to enter the field
  2. Type your username
  3. Press the Tab key to move to the password field
  4. Type your password
  5. Press enter to log in

You may be a person who presses the Tab key to move to the password field, but picks up the mouse to press the Login button.  That's ok! The goal is to allow a level of flexibility in your interaction designs. Including a high level of detail in your specifications around keyboard interaction will lead to a more complete user experience.