Operate Using the Keyboard Only
Is it possible to operate all active elements using the keyboard?
Several user groups do not use a standard mouse, because of a visual or physical disability. They use a keyboard or alternative input device, like a switch, to interact with their computer. These users move focus through each active element on the page in turn until it is on the element they want to activate, and then selecting that element.
When an active element on a web page can only be operated using a mouse, and it's not possible to use the keyboard to move focus to or activate the element, people who don’t use a mouse will be unable to access information or functionality.
In HTML, only certain elements (links, form controls, image map areas) receive keyboard focus by default. However, some web pages contain more complex controls that are constructed with the use of other HTML elements such as <span> or <div>, which by default aren't active. The interactivity is added using scripting and additional HTML. Without this additional code, these elements won’t receive keyboard focus and will be impossible for keyboard users to reach or operate.
When active elements, such as links and buttons, do not display a clear visible indication when they receive focus, keyboard users may not know the current location of focus. Lack of clear visual focus indication makes it very difficult for such users to successfully navigate and interact with content, and may increase the chances of errors.
Browsers do provide a default indication of focus, but often this is very hard to see. For example, Internet Explorer and Firefox provide a faint dotted outline when an interface element receives focus, which isn’t adequate for people with visual impairments.
How can you test a website?
For each page:
- Use your Tab key to move through each active element in turn.
- For each active element, identify if the element receives keyboard focus.
- If the element receives focus, check if it can be operated using a standard keyboard command:
- If it's a link, can it be activated by pressing the Enter key?
- If it's a button, can it be activated by pressing Space or Enter?
- If it's a form input element that allows you to select from a list of options, like a list of checkboxes or radio buttons or combo-box menu, can you move through the list and select an option using the keyboard without any unexpected changes?
- If it's a text input field with autocomplete functionality, can autocomplete suggestions be selected using the keyboard?
- If the element launches a dialog box, does keyboard focus move into the dialog box, move through all active elements in the dialog box, and stay there until the dialog box is dismissed?
- For more complex user interface components, like a tabbed interface, does each control in the component follow the appropriate keyboard interaction for that component?
- If there's drag-and-drop functionality, can the equivalent functionality be performed using the keyboard?
Keyboard traps are situations where an interactive element takes keyboard focus and prevents it from moving to the next element. To recover, users have to refresh the page or use the mouse to click elsewhere on the page.
A common example is content displayed by plug-ins. Plug-ins present specific types of content inside a web page, such as video or animation, and respond to all user actions that takes place while the plug-in has the focus. If the plug-in does not provide a keyboard mechanism to return focus to the parent page, keyboard or alternative input device users can become trapped in the plug-in content.
When a keyboard trap is present, the result is that people who use a keyboard or keyboard-equivalent may be unable to access and interact with some content on the page.