Test the accessibility of your website: keyboard navigation
- June 22, 2020
- 3 minutes
This is part 3 of our blog series about testing the accessibility of your website. Also read the other parts:
Color and contrast
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.
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.
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:
- Can you get through the website in the right order with your TAB key?
- And can you get back with SHIFT-TAB keys in the correct, logical way?
- Is it always clearly visible which element has the focus of your keyboard?
- Can you easily access all interactive elements in your website?
- Are you able to use interactive elements with the ENTER key or SPACE bar?
- Is it simply possible to navigate through a form with TAB key and ENTER key/ SPACE bar and also to send the form?
Want to know more about testing the accessibility of your website? In part 4 of this blog series we will discuss automatic tests.