Summary: Keyboard accessibility allows people with and without disabilities to move through websites using only keystrokes, such as the Tab and arrow keys. It’s one of the most important aspects of web accessibility, allowing screen readers to operate web pages.
User groups
- People who experience limited motion or mobility, making mouse or pointer input challenging
- People with visual perception challenges that make hand-eye coordination difficult
- People with episodic disabilities, like arthritis, or pain-related disabilities who find extended mouse use painful
- People who use assistive technology software that emulates the keyboard, such as screen readers, speech recognition, or switch device scanning
- People who find a keyboard more efficient and may have learned frequent keyboard shortcuts
- People who are missing or have a broken mouse
Standard keyboard interaction
The main difference between keyboard input and mouse input is that users access interactive elements on a webpage with a set of primary keys, rather than using a pointing device.
With keyboards, people navigate in a linear manner from one element to the next before reaching the desired control.
Additional keys, such as keyboard shortcuts, can also aid user efficiency. However, all functionality should work with standard primary keys regardless of whether shortcuts are available.
Navigation keys
A limited set of keys are used for basic keyboard navigation. This helps reduce cognitive load while enhancing usability and creating cross-platform consistency. Users expect to navigate interfaces with the following set standard of keys.
| Key | Action |
|---|---|
| Tab | Moves focus to the next interactive element |
| Shift + Tab | Moves focus to the previous interactive element |
| Arrow (up, down, right, left) |
Move focus between nested or grouped elements, such as list items
Move selection or change the state of a component, such as radio buttons |
| Home | Scrolls to the beginning of a line or moves to the top of a webpage |
| End | Scrolls to the end of a line or moves to the bottom of a webpage |
| Page Up | Scrolls up the page |
| Page Down | Scrolls down the page |
Activation keys
| Key | Action |
|---|---|
| Enter | Activates the interactive element that has keyboard focus, or the default selection |
| Space | Activates the interactive element that has focus |
| Escape | Cancels or closes a popup element, such as a dialog or menu |
Dive deeper into keyboards
Try out this interactive date picker
- Use TAB and SHIFT + TAB to navigate between the interactive elements
- Press ENTER or SPACE on the date picker icon button
- Use ARROWS to navigate between the grouped dates within the date picker
- Use ESCAPE to close the date picker dialog
- Try out the date picker demo
Meet Lorna, a keyboard-only user
Learn about Lorna's Mitchell's experience in being a keyboard-only user and how their access to the web has changed.