Navigate to most elements
Shift + Tab - navigate backward
Keyboard focus indicators must be present.
Navigation order should be logical and intuitive.
Enter or Spacebar
Ensure elements with ARIA
role="button"can be activated with both key commands.
Spacebar - check/uncheck a checkbox
Checkboxes should be used when one or more option can be selected.
↑/↓ 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
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.
↑/↓ - navigate to an option
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.
↑/↓ 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).
↑/↓ - 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 - 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.
↑/↓ - Navigate Previous/next menu option
←/→ - expand/collapse submenu, move up/down one level.
←/→ - scroll horizontally
Spacebar/Shift + Spacebar - scroll by page
Minimize horizontal scrolling.