AccessibilityKeyboard

Users must be able to use any input device, including the keyboard, to fill in forms.

Making sure forms work with the keyboard helps disabled keyboard users and users of alternative input devices such as switches. Some expert users can also benefit as keyboard entry can be faster than using the mouse when filling out multiple forms.

Blind or partially sighted people often cannot see mouse cursors and may need to use a keyboard, perhaps with a screen reader or magnifier.

People with a motor impairment may not be able to use a mouse, so need to use a keyboard or an input device that emulates a keyboard.

The basics

Do:

• use native components or components from the GOV.UK or Home Office design systems wherever possible as they come with expected keyboard functionality built-in
• test that your component works as expected
• use hint text to explain how complex controls work
• make sure focus is visible and in the correct order

Do not:

• use custom form components without checking they work with the keyboard as well as the mouse

How to test forms with the keyboard

Make sure you can move from one field to another and back again, in the same order as the visual layout of the page. Do not skip fields or go backwards when tabbing forwards. Make sure to check that focus indication is right.

Commands

• Tab: Go to the next focusable element, these are link, button or form field elements
• Shift-tab: Go back to the previous focusable element

For different field types

• Checkboxes: Tab moves to the next checkbox, shift tab goes one back
• Radio buttons: Tab to the first radio and then use the arrow keys to move between them
• Select or dropdown: Space to open the options, arrow keys to move to the one you want and space or enter to choose the right option
• Buttons: Enter or space to activate
• Links: Enter or space to activate

Other considerations

If your form control is more complex than a text field or dropdown, consider giving users help with how to use the control via hint text. You should also offer an alternative, for example allowing users to type in a date field as well as having a date picker.

Using keyboard, switch or other input devices can be tiring for people with motor impairments so make sure users don’t have to use Tab more than they need to. Things like typeahead fields, the autocomplete attribute and considering field number and order can help make your form easier to use.