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.

  1. Click in the browser address bar.
  2. Take your hand off your mouse and use only your keyboard.
  3. Using the Tab button, navigate until you’ve reached the link below. (You can use Shift+Tab to navigate back one step.)

Test Link, Doesn't Go Anywhere

 

You probably noticed 4 things:

  1. You could follow along with where the keyboard focus was on the page.
  2. You were able to select any link on the page.
  3. Tabbing followed the same order as the page layout: left to right and top to bottom in columns.
  4. 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.

MailChimp Features page with dotted box around the link Email Designer indicating visual focus
MailChimp.com uses the default browser visual focus. In the above example, viewed in IE11, it is clear that the user is on the link 'Email Designer.' Hitting Enter would take them to that page.

 

StrideHealth homepage with 4 main navigation menu items and visual focus on the first one, Find Your Plan
StrideHealth.com replaced the default visual focus with the hover-state design: Tabbing through the main navigation in the top right with a keyboard looks the same as when hovering over each item with a mouse. It is very clear that the user is currently on Find Your Plan.

 

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.

The biggest problem is caused by JavaScript widgets with <div> or <span> elements. These can be assigned keyboard focus through tabindex. Alternatively, using only HTML links, buttons, and form fields will ensure that all elements can be tabbed to.

SF Zoo Tickets Form with keyboard insertion point in the First Name field
The San Francisco Zoo ticket-request form is keyboard accessible. In the screenshot above the keyboard focus is on the First Name field. Hitting the Tab key moves the focus to Last Name, allowing all users to complete and submit this form.

 

Bed Bath and Beyond homepage with large centerpiece carousel and dotted, visual focus, line around the second chapter indicator
A common problem is that media controls, such as those in carousels, are not keyboard accessible. However, on Bed, Bath, and Beyond you can tab to each chapter indicator and hit Enter to view that carousel chapter. (Note that this carousel would be more effective with recognizable icons or thumbnail images, instead of dots.)

 

Feedback pop up on FDA For Professionals page
FDA.gov follows through with keyboard accessibility by making it possible to navigate to and out of pop-ups. It is extremely important for users to be able to close pop-ups or they will be stuck inside them.

 

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. 

Sketch of expanded drop-down menu with options Apples, Bananas, and Oranges

 

Overview page on Ted.com with 4 drop-down menu filters, with the Events filter expanded and TedGlobal 2013 highlighted
The drop-down list on Ted.com works well by keyboard. Users can tab to their filter of choice, here Events, then hit Enter which brings them inside the drop-down. Then the arrow keys work to select their item, and another Enter makes 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.

City of London homepage with numbered arrows indicating the flow of tabbing from left to right and top to bottom
The Tab order on the City of London website follows the same visual flow as the page layout. The red numbered circles indicate the order and direction of tabbing through 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.

Government of Canada Skip to main content link in the top left corner
The Government of Canada website offers a Skip to main content link at the top of the page. This link only becomes available when users tab through the page, so it doesn’t disturb the visual design for mouse users. The link name is descriptive and concise. Hitting Enter on the Skip Navigation link takes users to the page heading Immigration & citizenship, allowing them to continue tabbing through the links in the body content on the page. This last step is frequently overlooked, but essential. 

Conclusion

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.