Many users who encounter an interactive data visualization will navigate it using a mouse, but many users will use a keyboard or other assistive technologies instead of a mouse. When designing an interactive data visualization, we must ensure that they are keyboard accessible.
Test your data visualization or dashboard with a keyboard to make sure it behaves as expected. The table below from WebAIM’s article Keyboard Accessibility outlines the most common online interactions and the corresponding keystrokes. Use these keystrokes to test your visualization with a keyboard.
Interaction
Keystrokes
Navigate to interactive elements
Tab - navigate forward
Shift + Tab - navigate backward
Link
Enter - activate the link
Button
Enter or Spacebar - activate the button
Checkbox
Spacebar - check/uncheck a checkbox
Radio buttons
Spacebar - select the focused option (if not selected)
↑/↓ or ←/→ - navigate between options
Tab - leave the group of radio buttons
Select (dropdown) menu
↑/↓ - navigate between options
Spacebar - expand
Enter/Esc - select option and collapse
Autocomplete
Type to begin filtering
↑/↓ - navigate to an option
Enter - select an option
Dialog
Esc - close
Slider
↑/↓ or ←/→ - increase or decrease slider value
Home/End - beginning or end
Menu bar
↑/↓ - previous/next menu option
Enter/End - expand the menu (optional) and select an option.
←/→ - expand/collapse submenu
Tab panel
Tab - once to navigate into the group of tabs and once to navigate out of the group of tabs
↑/↓ or ←/→ - choose and activate previous/next 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
For more detailed guidance on keyboard accessibility, see WebAIM’s article Keyboard Accessibility.