Test the accessibility of your website: keyboard navigation

Close-up of arrow keys at a gaming keyboard

This is part 3 of our blog series about testing the accessibility of your website. Also read the other parts:

Color and contrast
Enlarge font
Automatic testing
Screen readers

Do you want to get started with the accessibility of your website? Then it helps to test how your website is now. You learn a lot from this, so that you can then take more targeted measures. This is part 3 of our blog series about testing the accessibility of your website. In this section we discuss how to test whether your website is suitable for keyboard navigation.

If you want to make your website accessible, this is an essential part. Many people with motor challenges cannot use a mouse and depend on a keyboard for navigation. Blind and partially sighted people also often use a keyboard to navigate quickly. You can easily do this test manually.

Keyboard navigation and the WCAG

The WCAG describes a few things about making your website accessible to a keyboard. In summary, this is what is necessary to make your website accessible to the keyboard according to guideline 2.1.1. from WCAG:

All parts of your website must be accessible

All functionality of your website must be operable via a keyboard interface. This also applies to forms, menus, buttons and ordering processes.

Timed keystrokes should not be required

To be able to navigate on your website with a keyboard, it should not be necessary, for example, to press a key several times within a short time or to hold down a key for a longer time.

There is one exception

Sometimes it is not possible to make a functionality accessible by means of keyboard navigation. This applies to functionality that depends on the path of the user’s movement. Examples include freehand drawing and watercolor painting. These activities are not only about the start and end points, but also the path between them. Therefore, drawing a regular geometric shape or moving an object is possible with a keyboard, but creating a watercolor painting is not.

How do users navigate with their keyboard?

Before you start testing, it is useful to know how users usually navigate with a keyboard. Therefore a short explanation.

The main keys

The main key for keyboard navigation is the TAB key. With this key you can navigate within a website between links and within forms. With SHIFT-TAB keys you go back. In addition, the ENTER key and the SPACE bar are often used to select items and to click. The ARROWS keys are used for other navigation in a website. At the bottom of this WebAIM article you will find an overview of commonly used key combinations.

Elements in focus

Users generally navigate with the TAB key to links, buttons and items within forms. It is important that the user can see which element has the focus of the keyboard. Often this is done by means of a border, but you can also choose to make elements extra striking in other ways. For example, by changing the background color.

Navigation order

It is also important in which order interactive items are located on the page. The user usually expects this to happen from left to right and top to bottom.

Jump to content

Today, accessible websites often allow people to jump directly to the main content with their keyboard. Especially if there are many interactive elements above the main content.

Descriptive links

Blind and partially sighted people depend on the description of the elements on your website. Links and buttons with “click here” ensure that these users have no idea what they are activating or where they are navigating.

Pay attention to this when testing keyboard navigation

Okay, we’re ready to test. First of all: turn off your mouse before starting the test. You want to see what happens if you only rely on keyboard navigation.

Then ask yourself the following questions:

Want to know more about testing the accessibility of your website? In part 4 of this blog series we will discuss automatic tests.