Skip to main content
LifeworksInclusive Guide

5. Keyboard navigation

Only some people visiting your website can use a mouse or touch screen. Users with motor skill impairments or even advanced users (think tabbing between input fields in a form) use a keyboard and similar assistive technologies to navigate your website.

The focus style applied to an element acts as the mouse cursor, indicating to the user where the contextual focus is, I.e., if you press Enter now, you’ll activate this button.

💡

Suggested approach

Ensuring your website works with keyboard-only interactions enables input methods such as screen readers, switch controls, and more.

🪄

Putting it into action

  • Including tab order and focus state
  • Ensure all interactive elements (e.g. buttons, links, tabs) are focusable for users using only a keyboard.
  • Don’t make non-interactive elements tab-focusable. A heading or paragraph should not receive focus when the user presses the tab key.
  • Ensure that when an interactive element has focus, it is given a style that differentiates it from the non-focused elements (e.g., focus outline ring). If the only difference in style is a colour (e.g. a lighter or darker version of the same colour), ensure that it has a contrast ratio of at least 3:1 against the unfocused elements.