Summary: For users who can’t use a mouse make interactive and navigation elements easily accessible by tabbing and display a keyboard-focus indicator.
Certain users navigate the internet using the keyboard rather than the mouse. Expert “power” users prefer keyboard commands for efficiency, while users with certain disabilities have no choice but to use the keyboard. For example, people with a motor impairment have difficulty with the fine motor movements required for using a mouse; blind users rely on assistive technology such as screen readers and can’t see where to click the mouse.
The big difference between the keyboard and the mouse is that when users navigate through the keyboard, the access to the links on the screen is sequential: users must tab through all the links one by one before reaching a link of interest. In contrast, a mouse user can inspect the links available on the screen and move the cursor directly to the link he wants to click; thus, the mouse allows direct access to the links on the screen.
Even the most fancy or wonderful site is completely useless to someone who cannot access its controls and interact with it. Keyboard-friendly websites make these interactions possible for users who cannot use the mouse.
Test a Website’s Keyboard Accessibility
For those of you reading this article on a desktop or laptop in Firefox, IE, Chrome, or Safari, please do this exercise.
Click in the browser address bar.
Take your hand off your mouse and use only your keyboard.
Using the Tab button, navigate until you’ve reached the link below. (You can use Shift+Tab to navigate back one step.)
You could follow along with where the keyboard focus was on the page.
You were able to select any link on the page.
Tabbing followed the same order as the page layout: left to right and top to bottom in columns.
It was a bit annoying to tab through the long navigation lists before getting to the test button. (But you could do it.)
This is a quick test to run on your website as well. When you do the test, follow the next 3 guidelines for making your website keyboard accessible.
Obvious Keyboard Focus
Imagine someone using their mouse to browse the internet without seeing the cursor on the screen. Impossible, right? This is what it’s like if there’s no visual indicator of where the keyboard focus currently is on the page.
Websites need to provide the same feedback for keyboard and mouse users. The keyboard focus is coded by default into all the common web browsers. Some browsers default to a thin grey dotted line, others to a blue solid border. (This difference doesn’t matter: users will know the convention employed by their favorite browser.)
Removing the keyboard focus indicator is catastrophic for keyboard users. Commonly, the focus indicator is removed because it’s thought to be an eye sore. If you don’t like the indicator provided by the browser, don’t remove it altogether; instead replace it with a design that is consistent with your site’s look-and-feel. This CSS tutorial on how to add in a new focus style might be helpful.
All Interactive Elements Are Accessible
Keyboard users must be able to access all interactive elements, not just the main navigation or in-line links. This means that form elements, drop-down menus, buttons, dialog boxes, and other widgets all have to be accessible by tabbing through the interface.
Drop-down menus can be difficult to use by keyboard if users can’t scroll through the list separately from making a selection. This happens if the arrow-down button selects the first item from the list, instead of moving down through the list options. For example, in the dropdown below this would result in selecting Apples when hitting the arrow-down key once. Instead, the arrow-down key should let the user scroll between Apples, Bananas, and Oranges and use Enter to make their selection.
Consider a Skip Navigation Link
On most websites the tab order will be coded to reflect the page layout; that is top to bottom and left to right. This helps sighted keyboard users get around the page.
One of the pitfalls of tabbing along the page layout is that navigation comes first in the conventional webpage layout (which we strongly recommend retaining to leverage user expectations). On some pages that means that keyboard users might have to tab through 100+ navigation elements to get to the main content, which can be difficult (let alone time consuming).
Mouse users can simply disregard the main navigation and interact directly with any of the links in the main content area. Offering a Skip Navigation link provides some of that benefit to keyboard-only users.
People who are unable to use a mouse or see the screen need to access all website content and functionality through their keyboard alone. To make your website keyboard accessible it is important to allow users to: 1) follow along with where the keyboard focus is, 2) navigate to all interactive elements, and 3) bypass the navigation if there are many links.