Keyboard navigation and accessibility with visualizations

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.
everviz is an online visualization tool that helps you create interactive charts and maps.Embed your interactive visualizations on your website, blog og intranet. You can also export them as images or PDF for offline and print.
Why not try it yourself? It only takes a minute to create your first chart.

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.

Navigate to interactive elementsTabShift + Tab – navigate backwardKeyboard focus indicators must be present.Navigation order should be logical and intuitive.
LinkEnter – activate the link
ButtonEnter or Spacebar – activate the buttonEnsure elements with ARIA role=”button” can be activated with both key commands.
CheckboxSpacebar – check/uncheck a checkboxCheckboxes 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 – expandYou can also filter or jump to options in the menu as you type letters.
AutocompleteType to begin filtering/ – navigate to an optionEnter – select an option
DialogEsc – closeModal 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 endFor 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 submenuA menu bar dynamically changes content within an application. Links that utilize Tab/Enter are NOT menu bars.
Tab panelTab – 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 pageThe 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.


Questions or ideas? Get in touch!

Would love to hear your thoughts, please get in touch!

We are everviz. We believe that telling stories with beautiful interactive visualizations makes the message easier to understand and more engaging. Our mission is to make it easy for anyone to create and publish stunning visualizations to tell compelling stories.