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.


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.

Examples of users with access needs
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.