AccessibilityKeyboard basics
Most users navigate websites using a mouse to scroll through content and click on elements of a page.
Some users are not able to use a mouse (for instance, due to mobility or visual impairments) or just prefer to use a keyboard.
See the impact that keyboard compatibility has on user interaction, or read about Alex, a reporter with repetitive stress injury.
Helping everyone
Keyboard navigation allows many people to navigate a page without the use of a mouse. They can still ‘click’ on things, scroll through content and interact with pages if they are built correctly.
Some people just prefer to use keyboard controls because they can move through pages quicker that way. Making sure pages work with keyboard improves user journeys overall by making the interactive elements work for everyone.
The basics
Do:
- make sure all interactive elements can be reached by pressing the tab key
- make sure all interactive elements indicate clear focus when selected
- make sure a ‘skip to content’ link appears in one of the first few tab moves
- check that all interactive elements are focused in the order that you expect
- check that all interactive elements can be activated by keyboard
Do not:
- disable focus indication
- trap keyboard users in content that stops them moving around the rest of the page
- use single character key shortcuts
See more in WCAG basics easy keyboard checks.
| User | Access need | May find helpful |
|---|---|---|
| Blind | Cannot see to use a mouse Keyboard controls and uses screen reader | Skip to content links Character key shortcuts Alternatives to pointer gestures |
| Partially sighted or low vision | Cannot see content clearly at all times | Clear focus indication for a user to see where they are on page Character key shortcuts |
| Motor impaired | Some fine motor control, not enough to use a mouse | Clear focus indication for a user to see where they are on the page Alternatives to pointer gestures |
| Mobility impaired | Uses speech-to-text controls such as Dragon | Correct keyboard structure Alternatives to pointer gestures |
Creating good keyboard accessibility
To create good accessibility via keyboard, you need to consider the following:
Get in touch
If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.