Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Testing accessibility with a keyboard

When someone can't use a mouse, they will often use a keyboard instead. This means that all functionality must be usable with only a keyboard.

Although a blind person who uses a screen reader will also use the keyboard, they will not do so in the same way as a sighted person. The difference between screen reader and keyboard navigation is that screen reader users have many more keyboard commands available to them.

Testing with a keyboard plugged into a touch device is also a good idea. People who do not have the dexterity to use touch gestures will often use a keyboard instead.

Keyboard commands

These are the most common keyboard commands people use:

Command

Action

CTRL and l (lower case L)

Moves focus to the address bar

Tab

Moves focus to the next interactive element such as link, button, form field

Shift tab

Moves focus to the previous interactive element such as link, button, form field

Enter

Activates the interactive element that has focus

Space

Toggles an interactive element (for example, checkbox, radio button, show/hide)

Up/down/left/right arrow

Selects radio buttons or options in a dropdown

Escape

Cancels the current action (for example, closes a dialog, closes dropdowns)

Page up/page down

Scrolls the page up or down

Keyboard focus

Keyboard focus is how the interactive elements are navigated when using the Tab key. When you use a mouse, you point to the thing you want to use and click on it. When you use a keyboard, things do not work the same way. You move from one interactive element to the next in sequential order. This means the order you move through those interactive elements must make sense. The last thing a keyboard user wants is for focus to jump about all over the place without any logic.

It's also important for keyboard users to know where they are in a page. Good design means interactive elements like links, buttons, and form fields are highlighted as a keyboard user focuses on them.

Quick checks

Make sure all interactive elements can be navigated to and operated with a keyboard. Make sure that:

  • links, buttons, form fields and other interactive elements can be focused on using the Tab key
  • links and buttons can be activated using the Enter key
  • checkboxes, radio buttons, and options in dropdowns can be selected using the Up/down/left/right arrow keys
  • it's always obvious which interactive element has keyboard focus
  • the order of interactive elements seems sensible
  • nothing unexpected happens when an interactive element has focus
  • checkboxes and radio buttons can be selected with the Space key
  • forms can be submitted with the Enter key
  • all interactive elements can be reached with the keyboard

You should use:

  • the Tab key to move through the content
  • the Enter key to check that links work
  • the Enter key to check that forms submit ok
  • the Space key to select checkboxes and radio buttons

Why does this matter

Many people don't use a mouse. This might be because they're blind, or because they can't physically control a mouse or trackpad.

Sighted keyboard users need to know which interactive element has focus, so they know what to expect when they press a key.

Back to top