Testing accessibility with a keyboard
When someone can't use a mouse, they will often use a keyboard instead. This means that all functionality must be usable with only a keyboard.
Although a blind person who uses a screen reader will also use the keyboard, they will not do so in the same way as a sighted person. The difference between screen reader and keyboard navigation is that screen reader users have many more keyboard commands available to them.
Testing with a keyboard plugged into a touch device is also a good idea. People who do not have the dexterity to use touch gestures will often use a keyboard instead.
Keyboard commands
These are the most common keyboard commands people use:
| Command |
Action |
|---|---|
| CTRL and l (lower case L) |
Moves focus to the address bar |
| Tab |
Moves focus to the next interactive element such as link, button, form field |
| Shift tab |
Moves focus to the previous interactive element such as link, button, form field |
| Enter |
Activates the interactive element that has focus |
| Space |
Toggles an interactive element (for example, checkbox, radio button, show/hide) |
| Up/down/left/right arrow |
Selects radio buttons or options in a dropdown |
| Escape |
Cancels the current action (for example, closes a dialog, closes dropdowns) |
| Page up/page down |
Scrolls the page up or down |
Keyboard focus
Keyboard focus is how the interactive elements are navigated when using the Tab key. When you use a mouse, you point to the thing you want to use and click on it. When you use a keyboard, things do not work the same way. You move from one interactive element to the next in sequential order. This means the order you move through those interactive elements must make sense. The last thing a keyboard user wants is for focus to jump about all over the place without any logic.
It's also important for keyboard users to know where they are in a page. Good design means interactive elements like links, buttons, and form fields are highlighted as a keyboard user focuses on them.
Quick checks
Make sure all interactive elements can be navigated to and operated with a keyboard. Make sure that:
- links, buttons, form fields and other interactive elements can be focused on using the Tab key
- links and buttons can be activated using the Enter key
- checkboxes, radio buttons, and options in dropdowns can be selected using the Up/down/left/right arrow keys
- it's always obvious which interactive element has keyboard focus
- the order of interactive elements seems sensible
- nothing unexpected happens when an interactive element has focus
- checkboxes and radio buttons can be selected with the Space key
- forms can be submitted with the Enter key
- all interactive elements can be reached with the keyboard
You should use:
- the Tab key to move through the content
- the Enter key to check that links work
- the Enter key to check that forms submit ok
- the Space key to select checkboxes and radio buttons
Why does this matter
Many people don't use a mouse. This might be because they're blind, or because they can't physically control a mouse or trackpad.
Sighted keyboard users need to know which interactive element has focus, so they know what to expect when they press a key.
There is a problem
Thanks for your feedback