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.

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:

• tab navigation
• focus
• ‘skip to content’ links
• character key shortcuts
• pointer gestures