Keyboard Navigation

Using a Keyboard for Navigation

Table of Keyboard Shortcuts from WebAIM: https://webaim.org/techniques/keyboard/

Interaction

Keystrokes

Notes

Navigate to most elements

  • Tab

  • Shift + Tab - navigate backward

  • Keyboard focus indicators must be present.

  • Navigation order should be logical and intuitive.

Link

Enter

Button

Enter or Spacebar

Ensure elements with ARIA role="button"can be activated with both key commands.

Checkbox

Spacebar - check/uncheck a checkbox

Checkboxes should be used when one or more option can be selected.

Radio buttons

  • ↑/↓ or ←/→ - select an option.

  • Tab - move to the next element.

Radio buttons should be used when only one option from a group can be selected.

Select (dropdown) menu

  • / - navigate between menu options

  • Spacebar - expand

You can also filter by typing letters, but this behavior varies by browser. Some will filter as you type, like autocomplete. Others will only sort by first letter. E.g., in a list of US States, hitting A then R may take you to Arizona, or it may take you to Alabama and then Rhode Island.

Autocomplete

  • Type to begin filtering

  • /↓ - navigate to an option

  • Enter - select an option

Dialog

Esc - close

  • Modal dialogs should maintain keyboard focus.

  • Non-modal dialogs should close automatically when they lose focus.

  • When a dialog closes, focus should usually return to the element that opened the dialog.

Slider

  • ↑/↓ or ←/→ - increase or decrease slider value

  • Home/End - beginning or end

  • For double-sliders (to set a range), Tab/Shift + Tab should toggle between each end.

  • In some sliders PageUp/PageDown can move by a larger increment (e.g., by 10).

Menu bar

  • ↑/↓ - Previous/next menu option

  • Enter - expand the menu (optional) and select an option.

  • ←/→ - expand/collapse submenu

  • Not all menus should have these controls. Simpler menus should usually rely on Tab/Enter.

Tab panel

  • Tab - once to navigate into the group of tabs and once to navigate out of the group of tabs

  • ↑/↓ or ←/→ - previous/next tab.

  • This is for 'application' tabs that change without loading a new page. If a menu looks like a group of tabs, but is actually a group of links to different pages, Tab and Enterare more appropriate.

  • The tab content should update automatically when pressing the arrow keys. You should not hit Enter to activate the tab.

'Tree' menu

  • ↑/↓ - Navigate Previous/next menu option

  • ←/→ - expand/collapse submenu, move up/down one level.

Scroll

  • ↑/↓ - scroll vertically

  • ←/→ - scroll horizontally

  • Spacebar/Shift + Spacebar - scroll by page

Minimize horizontal scrolling.