One important thing when learning how to make your website more accessible is understanding that there are people who prefer to navigate with a keyboard.

A considerable number of users prefer not to use a pointing device when navigating the web. This can be for many reasons, ranging from inability to use a mouse, to something as little as not wanting to move one’s hands away from the keyboard (every extra motion wastes time and energy).

From an accessibility point of view, we need to take into account reasons why people might want or need to use only a keyboard for navigating purposes when designing our websites.

This article will cover several approaches and techniques to make sure that it is possible for keyboard-only visitors to be able to easily navigate your site.

How Can I Tell if My Site Is Keyboard-only Accessible?

Amazon.com
Source: Amazon.com

The first thing you need to understand when designing for keyboard navigability is users with only a keyboard will go through a site sequentially, or in order from top to bottom.

You can’t simply point at items to get to them; you need to be able to tab through each item as it exists and either keep moving or using the “enter” key to trigger an action.

You should first test out your site as it is. Place the cursor at the URL for the site, and put away your mouse or testing device. Try tabbing through the page, and observe what happens. (Note, it is possible to tab through in reverse order using “Shift-tab” so don’t worry if you accidentally skip past an important item).

On a well structured site, you will notice that you can

  1. See where you are at any point on the page.
  2. Choose any link by simply hitting “enter.”

You will notice that the flow of the page is from top to bottom; your progress will follow the layout of the page.

You may find that it can be a bit tedious to go through long lists of links on a left menu (though at least you will be able to access everything). This is something you will want to keep in mind as you design your site for keyboard accessibility. We will address how to handle this issue below.

How Can a User Tell Where They Are on the Page?

Telerik.com
Source: Telerik.com

Unlike with mouse-driven navigation which enables users to simply click around on a page, it is crucial for keyboard navigators to be able to tell where they are on a web page at a given moment. This is controlled by “focus.”

On the simplest sites, you will find that all browsers will automatically ensure that identification of the cursor is indicated by the focus state. In some cases it will be a thin border around the link element, or in other cases it might be a small dotted line underneath the focused element.

In fact, if you do nothing other than code simple HTML, your site should be easily navigable. Where many designers and developers run into trouble is where they choose to override some of this functionality because of a belief that it “just doesn’t look good.” (This is often done inside CSS files, removing things like underlining on links, etc).

While this may be tempting it’s a bad idea from an accessibility standpoint. If you must remove these for artistic reasons, make sure that there is something else in place that is clearly visible.

What Breaks Keyboard Navigation?

Microsoft.com
Source: Microsoft.com
  • Div and span elements
  • Drop-down menus

All things being equal, there is some give and take when it comes to designing websites. Many of the elements that improve navigation for others may end up causing problems for those who browse using only a keyboard.

Div and Span Elements

With modern web design, it is not uncommon to create a great deal of interactivity on the page, and to make many elements on a page using JavaScript, which modifies many existing “div” and “span” elements.

Unfortunately, these particular types of elements are not visible to keyboards. While interaction may be possible and obvious for those using a pointing device, keyboards may simply skip over interactive elements designed in this fashion.

Luckily there is a solution. Simply use “tabindex” attributes for these elements, and they will be recognized by the tab button on the keyboard. Tabindex is an attribute which will indicate that the element can be focused, and the number assigned to it will be the order that a keyboard will tab through to it.

For instance, if you want to do this with a div element, it can be done like so:


<div tabindex="0">This will be the first item that a tab on the keyboard will go to after any previous tabs</div>

 

The value of 0 indicates that it will be accessed in sequential order. If you wish to have elements tab in any different order than they appear on the page, give them orders lower than previous tabindex entries.

Note, avoid using -1 as a tabindex value, as it will be unreachable by keyboard navigation (it is sometimes used for JavaScript purposes, wherein they can become useful for dynamic elements).

Drop-down Menus

A common web design pattern is to use drop-down menus. They make it possible to provide access to a wide array of categories in a minimal amount of space. However, for users who only use keyboards for navigation, these menus can cause problems.

One problem that can occur is if the down arrow used by keyboard navigation ends up automatically selecting the first item on the menu, instead of enabling users to move through the different items on the list.

The down-arrow key should allow users to be able to choose different items rather and let users use the enter key to be able to select the item that they want.

What Features Can I Add to My Site To Make It Keyboard Navigable

  • Skip a “navigation link”
  • Use something other than color to identify the links
  • Use native controls

Use a “Skip Navigation” Link

As we mentioned earlier, it can be somewhat tedious to go through a long list of links on a top or left navigation menu to simply get to the meat of the article. This is particularly the case if there are hundreds of links on a page.

One way of making things easier for keyboard navigators is to create a “skip navigation link” which is an anchored link on the page which when a user clicks enter with a keyboard, it will jump down the page to a specified location.

In most cases, you can have this go directly to the content of the page.

Use Something Other Than Color To Identify Links

Typically when we think of color, we are thinking about visual accessibility. While this is important, it also applies to keyboard accessibility as well.

Remember, users need to know where they are on a page when navigating via keyboard. They also should be able to identify clear markers for where the tab key will land. It enables those who use a keyboard to be able to quickly identify where links exist on a page.

Use Native Controls

There are many elements that are available for use in the most up-to-date versions of HTML, particularly native control elements. These include “button,” “input,” “textarea,” “select,” and “option.”

You can use these elements to create keyboard accessibility through the use of some helpful attributes. For example, if you have an input type of “range” and set a min and max attribute, users who use a keyboard would be able to access and use it through a combination of tab and the space key.

What To Do Next

This article is by far not the end of all methods for making your site accessible for all users. There are a number of other things you need to keep in mind. One of these is to avoid using CAPTCHA elements on your web pages (these are the little snippets of difficult to read text that are designed to fool robots).

The problem with these is that they can cause serious accessibility problems not just for keyboard users, but also for many other users as well, particularly those who use screen readers.

Beyond the simple methods described above, there are a few advanced tricks that you can use, such as creating keyboard navigable JavaScript elements, using tabindex, or various non-native controls. Similarly, you can also use tools like React to create custom keyboard shortcuts for your web pages.

Whichever methods you choose to apply, making sure your site is navigable by keyboard is an important step to making sure that it is truly accessible.