Skip to content

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.

(This is a quick update and tidy up of an older page version of this same page)

Where to check

To manually check things for myself, I like to go to the Mozilla Developer Network (MDN) and search for the HTML element in question. That gives me a reduced test case so my testing is more clear.

MDN doesn’t always list what the default keyboard interactions are, so sometimes I check the Keyboard Interactions section of a pattern on the ARIA Authoring Practices Guide site. I follow the first rule of ARIA, though, and use HTML instead of ARIA where I can.

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, selects, , comboboxes, toolbars. Slightly confusingly this does not include checkbox`es, because you can select multiple items.

  • Enter navigates to the link destination.
  • ( Space does not navigate to the link destination. (It does scroll the page, though: the default action for Space) )

buttons

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

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, comboboxes, selects

  • ↑, ↓: moves between elements in the current list
  • Printable characters (e.g. letters, punctuation, Space): moves focus to the next item that starts with those characters
  • 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.

radios (pick only one)

  • ↑, →, ↓, ← (Arrow keys): moves between elements in the group, checking the current item
  • Space: checks the focused radio

checkboxes (pick multiple)

Space: toggles the focused checkbox

Inside a form

Enter: submit form (when an element inside a form has focus, and the element has no default action for Enter)

Which elements receive focus?

Only interactive elements (a link, a button, any kind of form control) automatically get keyboard focus.

We can send programmatic focus to other elements, but this should be done infrequently and carefully. For example:

  • when opening a modal: sending focus to a modal’s heading;
  • when closing a modal: sending focus to the button that opened the modal.

What if no interactive element has focus?

The default keyboard action takes place:

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