What key does what?

It depends on the HTML element that has focus and what is selected, but some keyboard interactions are similar for every focusable element.

General keyboard interactions

• Tab: moves to the next focusable element / group.
• Shift + Tab: moves to the previous focusable element / group.
• Escape: closes the open selection list or dismisses the open modal.
• Space: enters a space in the text input or toggles the selected option.
• Enter: performs the action of the focused or selected element.

A group is a set of items where only one item can be selected. For example: radios, tabs, or selects. Slightly confusingly this does not include checkboxes, because you can select multiple items.

Terminology clarification

Name, Role, Value

Every interactive element must have a name, a role, and a value.

• The name comes from associated text, such as a label.
• The role is usually implied from the HTML element. For example, a button has role of button.
• The value is the data, such as the typed-in text in a text input.

Focus and selection

When tabbing to an HTML select, it gains focus. When the select is opened using Space, it still has focus. Using ↑ ↓ to move changes the option selection. Using Enter performs the action of accepting the current selection, and sets the value of the select.

Specific keyboard interactions

Single-line text inputs (input type=“text”)

• Printable characters (e.g. letters, punctuation, Space)
  • enters the characters, setting the value of the input
• →, ←
  • moves the cursor inside the text input

Autocomplete

Note: these use an input type=“text” to enter the text and follow those keyboard interactions, plus the following.

• ↑, ↓
  • moves between elements in the current list
• Enter
  • chooses the selected option in the current list, sets the value of the autocomplete.

Note: for inline autocomplete the first match is automatically selected, and the value of the autocomplete is set.

buttons

• Space
  • presses the button
• Enter
  • presses the button

selects

• Space
  • opens the focused select
• Printable characters (e.g. letters, punctuation, Space)
  • moves focus to the next item that starts with those characters
• Enter
  • accepts the focused selection
• ↑, ↓:
  • moves between items

radios (pick only one)

• Space
  • selects the focused radio
• Enter
  • presses the button
  • follows the link
  • submits the containing form
  • accepts the focused selection
• ↑, →, ↓, ← (Arrow keys):
  • moves between elements in the group

checkboxes (pick multiple)

• Space
  • toggles the focused checkbox

Which elements receive focus?

Only interactive elements (a link, a button, any kind of form control) automatically get keyboard focus. We can send focus to other elements, but this should be done infrequently and carefully. We can autofocus elements on page (or modal) load, but this should be done infrequently and carefully.

What if no interactive element has focus?

The default keyboard action takes place:

• Tab: moves focus to the first interactive element on the page
• Shift + Tab: moves focus to the last interactive element on the page
• Space: moves down the page
• Enter: does nothing
• ↑, ↓: moves up and down the page
• →, ←: does nothing
• Esc: does nothing

Who uses just the keyboard?

• Power users use the keyboard because it’s faster.
• People with motor impairments use the keyboard because it doesn’t require precise movement like pointers do.
• People who use screen readers often use just the keyboard.

Where can I read more?

For more complex examples, we consult the WAI-ARIA Authoring Practices. The examples tend to be solid technically, but not very visually appealing!