Accessibility is crucial to our visualization platform, as it enables our customers to reach out with content, news and insights to the largest possible audience. An essential everviz accessibility feature is the added keyboard navigation support. With this, users are able to navigate and interact with the data points, chart menu, and other chart controls using the keyboard only.
Many of us may find ourselves in temporary or situational limitations on how we access and interact with web content. Even more will experience some kind of age-related impairment as we age. Loss of mobility, hearing , vision, memory loss and learning disability are all common in the elderly population.
Also, users without disabilities may use accessibility features because of preference or efficiency. Therefore, accessibility is not just for people with disabilities, it is for everyone.
Benefits of keyboard navigation
Keyboard navigation is one of the most important aspects of web accessibility. In addition to traditional keyboards, some users may use modified keyboards or other hardware that mimics the functionality of a keyboard.
Specifically, for people with low vision who may have trouble finding or tracking a pointer indicator on screen, keyboard navigation will be beneficial.
For people who are blind, and who cannot use devices such as mice that require eye-hand coordination, keyboard navigation is even more important.
In addition some people with hand tremors find using a mouse very difficult, and therefore usually use a keyboard
Interactive chart demo
Why not try out our demo below yourself!
The following table includes many of the most common online interactions, the standard keystrokes for keyboard interaction, and additional information on things to consider while using a keyboard to navigate the web in general.
| Interaction | Keystrokes | Notes |
| Navigate to interactive elements | TabShift + Tab – navigate backward | Keyboard focus indicators must be present.Navigation order should be logical and intuitive. |
| Link | Enter – activate the link | |
| Button | Enter or Spacebar – activate the button | 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 in a group 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 optionsSpacebar – expand | You can also filter or jump to options in the menu as you type letters. |
| Autocomplete | Type to begin filtering↑/↓ – navigate to an optionEnter – 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 valueHome/End – beginning or end | For double-headed 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 optionEnter – expand the menu (optional) and select an option.←/→ – expand/collapse submenu | A menu bar dynamically changes content within an application. Links that utilize Tab/Enter are NOT menu bars. |
| 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. | This is for ‘application’ tabs that dynamically change content within the tab panel. If a menu looks like a group of tabs, but is actually a group of links to different pages, Tab and Enter are more appropriate. |
| ‘Tree’ menu | ↑/↓ – Navigate Previous/next menu option←/→ – expand/collapse submenu, move up/down one level. | |
| Scroll | ↑/↓ – scroll vertically←/→ – scroll horizontallySpacebar/Shift + Spacebar – scroll by page | The space bar will, by default, scroll the page is an interactive control that allows space bar input is not focused. Horizontal scrolling should be minimized. |
