Overview
Users should be able to navigate and use the entire user interface with just the keyboard. This is great for super users who value speed and efficiency, but also for users with any impairments who rely on other input devices. As a designer, you must map out the order of keyboard focus for developers.
- Tab moves focus to the next element on the page. Make sure tab order is intuitive.
- Shift-Tab moves focus to the previous element on the page.
| Component | Keyboard shortcuts |
|---|---|
| Buttons | Enter selects the button.Space selects the button. |
| Multi-action buttons | Menu opens on focus.Enter, down arrow, space transfers focus to first child.↑/↓ cycles through options.Enter selects the button.Space selects the button. |
| Split buttons | As for multi-action buttons, but with a standard button with its own tab stop immediately before the dropdown indicator. |
| Toggle buttons | Tab moves keyboard focus to the selected button in its toggle group. If no button is selected, focus moves to the first button in the toggle group. Moves to the next input on the page if pressed again.Right arrow / Down arrow moves focus to and checks the next toggle button in the group. If focus is on the last toggle button, moves focus to the first toggle radio button. The state of the previously checked toggle button is changed to unchecked.Left arrow / Up arrow moves focus to and checks the previous toggle button in the group. If focus is on the first toggle button, moves focus to the last toggle button. The state of the previously checked toggle button is changed to unchecked.Space changes the state to selected if the toggle button with focus is not selected, Otherwise, does nothing.Esc closes the popover and returns focus to the default position without changing selection. |
| Checkboxes | Each checkbox has its own tab stop. Tab moves keyboard focus to the checkbox.Space toggles between checked and unchecked states.Arrow keys have no effect. |
| Dialogs | When a dialog opens, focus is transferred to the first focusable element inside it.Focus should always be trapped inside the dialog. When tabbing from the last item, focus goes back to the first item.Esc or defined action (for example, button, close icon) closes the dialog and returns focus to the item that originally triggered it.It is not possible to focus on elements on the background page until the dialog is closed. |
| Dropdowns, Selects | Space opens the pop-up.Enter opens the pop up.Esc closes the pop-up if it is open.Tab closes the pop-up and moves to the following focusable element.Arrow keys display the pop-up and focus cycles through options, setting the values in the text box at the same time.Down arrow on the last option cycles to the first.Up arrow on the first option cycles to the last.Enter closes the pop-up. |
| Links | Enter selects the link. |
| Menus and Navigation | Tab enters the control. Moves to the next input on the page if pressed again.Up arrow and Down arrow cycle through options.Enter expands the menu (optional) and selects an option.Left arrow and Right arrow expand or collapse submenu.Esc closes the popover and returns focus to the default position without changing selection. |
| Radio buttons | Tab moves keyboard focus to the checked radio button in the group. If no radio button is checked, focus moves to the first radio button in the group. Moves to the next input on the page if pressed again.Right arrow and Down arrow move focus and check the next radio button in the group. If focus is on the last radio button, move focus to the first radio button. The state of the previously checked radio button is changed to unchecked.Left arrow and Up arrow move focus to and checks the previous radio button in the group. If focus is on the first radio button, move focus to the last radio button. The state of the previously checked radio button is changed to unchecked.Space changes an unchecked radio button with focus to checked. Otherwise, does nothing. |
| Switches | Each switch has its own tab stop.Space switches on/off.Arrow keys have no effect. |
| Tabs | Tab moves keyboard focus to the active tab in its group. If no tab is active, focus moves to the first tab in the group. Moves to the next input on the page if pressed again.Up arrow and Down arrow or Left arrow and Right arrow move focus and select the next tab in the group. If focus is on the last tab, move focus to the first tab.Right arrow and Down arrow move focus and check the next tab in the group. If focus is on the last tab, move focus to the first tab. The state of the previously checked tab is changed to unchecked.Left arrow and Up arrow move focus and checks the previous tab in the group. If focus is on the first tab, move focus to the last tab. The state of the previously checked tab is changed to unchecked.Space changes the state to active if the tab with focus is not active. Otherwise, does nothing. |