Common Issues Identified During Keyboard-Only Navigation Testing

  • No focus indicators. Sometimes, a developer will remove the base styling for focus indicators. This means that when you are tabbing through a site, if you have no idea where you are, the focus indicators have been removed and the styling needs to be added back in. This is the most critical barrier for keyboard only users as it prevents them from navigating a site at all.
  • No custom designed focus indicators. If you notice the color and design of focus indicators changing across browsers, chances are the focus indicators are only set to use the default browser focus indicators. Not all default browser focus indicators meet color contrast guidelines and are usable so you would want to flag this as an issue and reference Deque's "How to Design Useful and Usable Focus Indicators" when designing custom focus indicators.
  • No skip to main content link. This link is crucial for physically disabled people as it allows them to skip the main navigation on the site, improving both the time and energy used to navigate a site.
  • Mega menus that expand automatically. When a main menu on a site expands automatically without being activated by a user, this creates excessive and unneeded tabbing for anyone using keyboard-only navigation. Depending on the amount of dropdown items, you could be adding up to 40 tabbing actions to a physically disabled person's navigation process. Instead, each menu item should be activated by the Enter or Space key to allow a user to choose which menu item (if any) that they would like to activate.
  • Keyboard traps. Watch for content where you can't escape the content. An example would be a pop-up window (also known as a modal dialogue).  If you are unable to escape the pop-up window either through a cancel button or the escape key, you would get stuck in the pop up window would need to close out of the website or product.
  • Tabbing order not accurate. Watch for the tabbing order to be out of sequence with the visual order of content. If this occurs, the tabbing order should be changed to match the visual order.
  • Not all interactive elements are reachable by the keyboard. Look for interactive elements, such as buttons, links, and videos that aren't receiving keyboard focus. In addition, look for modal dialog boxes that do not receive focus.
  • Non-interactive elements are reachable by the keyboard. Sometimes people accidentally put in tabbing focus on non-interactive elements, such as headings and body content. This creates unneeded navigation for a keyboard only users as they can review the main content of a page by using the up and down arrows. 

How to Test

The following keyboard commands should be used when testing keyboard only navigation. The keys used for keyboard only navigation are not the same keys used for screen reader navigation. They are basic keys - not complex keyboard shortcut commands - as not all keyboard only navigation users have access to complex keyboard shortcuts so it's important to remember that your site must operate based on these basic keys. 

Source: WebAIM Keyboard Accessibility

InteractionKeystrokes
Navigate to interactive elements (links, buttons, form fields etc.).
  • Use the tab key to navigate forward.
  • Use Shift + Tab to navigate backward.
Link
  • Use the Enter or Return key to activate a link.
Button
  • Use the Enter, Return, or Spacebar key to activate the button. 
Checkbox
  • Use the spacebar key to check/uncheck a checkbox.
Radio buttons
  • Use the Spacebar key to select a focused option (if not selected).
  • Use the arrow keys to navigate between options.
  • Use the Tab key to leave the group of radio buttons.
Select (dropdown) menu
  • Use the Spacebar to expand a dropdown menu.
  • Use the arrow keys to navigate between options.
  • Use the Enter key to select an option.
  • Use the Escape key to collapse a dropdown menu. 
Autocomplete
  • Type in a keyboard to begin filtering.
  • Use the up and down arrow keys to navigate to an option.
  • Use the Enter or Return key to select an option. 
Dialog
  • Use the Escape key to close a modal dialogue (pop-up window). 
Menu bar
  • Use the Enter key to expand the menu and to select an option.
  • Use the down arrow key to move to the next menu option or the up arrow key to move to a previous menu option.
  • Use the left arrow to expand a sub-menu and the right arrow to collapse a sub-menu. 
Tab panel
  • Use the Tab key to navigate into the group of tabs.
  • Use the arrow keys to choose and activate next and previous tabs. 
'Tree' menu
  • Use the down arrow key to move to the next menu option or the up arrow key to move to a previous menu option
  • Use the left arrow to expand a sub-menu and the right arrow to collapse a sub-menu.
Scroll
  • Use the up and down arrows to scroll vertically
  • Use the right and left arrows to scroll horizontally
  • Use the spacebar and and shift + spacebar to scroll the page as well (as long as you are not on an interactive element on the page)