Graph visualization tools and accessibility

by Catherine Kearns, 2nd April 2018

How to build accessible graph visualization tools

The software market is constantly expanding and evolving, and the competition to develop smooth, functional, quality applications is fierce. An important factor that’s often overlooked is accessibility. Fully accessible digital content is essential to provide equal access and opportunity to people with diverse abilities.

Key recommendations for making digital content more accessible are provided by W3C’s Web Content Accessibility Guidelines (WCAG) 2.0 and Section 508 of the Rehabilitation Act of 1973. W3C also provides an overview of web accessibility laws and policies which may be helpful.

In this post we’ll give you tips on building graph visualization tools that as many people can benefit from as possible. We’ll also introduce you to the keyboard shortcuts for KeyLines, our graph visualization toolkit.

Accessibility – good for customers and business

Identifying the needs of your users is the first step in any application development process, and accessibility must be a key consideration. It should feed into early design phases, making accessibility a feature of, not an add-on to, the final product.

It makes clear business sense to focus on inclusivity. An up-front design that’s aimed at a diverse set of users, including those with impairments or limiting long-term illness (LLTI), will appeal to a broader market. Also, accessibility features aren’t just for users with impairments. Experienced users prefer keyboard shortcuts because it helps them perform tasks more quickly.

Accessibility gives you an opportunity to set standards and perform better than your competitors.

Let’s look at a few ways you can make your graph visualization tools more accessible.

How to make your graph visualization tools accessible

Using a keyboard instead of a mouse

Some standard mouse-free navigation is supported by your browser, such as using the Tab key to cycle through controls. You can make other keyboard controls available in your KeyLines application, for example:

Add a search box that users can Tab to and enter text to find nodes
Add a function that users can Tab to and press Enter to give focus to the chart

KeyLines supports the following shortcuts by default, although some keys may differ depending on your keyboard:

Select all items	consistent Ctrl + A
Cancel and revert active dragging	Esc
Play timebar animation	Space
Delete selected items	Del
Move selected items	Up, down, left, right arrows

Keyboard shortcuts are especially beneficial for people who may have a motor impairment – these users often have difficulty with the fine motor movements required for using a mouse. We’ll look more closely at the KeyLines-specific keyboard shortcuts later in this blog post.

Creating text versions of charts

It’s possible to create text versions of KeyLines charts so they can be reused by a text reader or text-to-speech system.

Providing a text alternative for charts means content can be accessed by people with a vision impairment using a screen reader or refreshable Braille device, or people with cognitive impairment using a text-to-speech system.

Choosing colors

It’s important to choose colors carefully when designing your graph visualization tools. Users with color deficiencies and visual impairment have difficulty distinguishing between contrasting colors with similar hues, saturation and lightness.

There are a number of free tools you can use to check your color schemes for accessibility, including this useful Color Contrast Check.

Avoid relying on color alone to convey important information on your chart. Make sure your users can select alternative options such as size, shapes, halos, glyphs or animation.

Chart showing the use of different node shapes and styles, labels, glyphs, halos, and donuts

Using ping with caution

Flashes or flickers on screen, or a rapid change in image sequence, can cause seizures in those with photosensitive epilepsy (PSE). For details, see the W3C guidelines on seizures.

The ping function lets you add an animated halo to a node. If your users may be sensitive to flashing images, allow them to turn off this feature, or make sure the time and color options comply with the W3C guidelines.

We’ve had a look at some ways you can make your KeyLines application more accessible. Now let’s take a closer look at supported keyboard shortcuts.

Customized interactions for greater accessibility

Using KeyLines’ powerful events engine, you can customize every interaction to meet the exact needs of your users.

In these examples we’ve combined keyboard and mouse interactions for faster chart selection and navigation, but you could just as easily make them keyboard-specific.

Design the behaviors your users need with the events engine

The aim here is to make life easier for users. So if they need a quick and simple way to create links between nodes, your application delivers.

Customize the events your users rely on most frequently when they’re analyzing graph data

Ready to get started?

Everybody should enjoy unrestricted access to great businesses and services, including graph visualization tools. By following accessibility best practices, you can make great progress toward designing an accessible graph visualization application.

The KeyLines SDK features a Keyboard Shortcuts demo, complete with examples of the controls you can use in your visualization application. To see it for yourself, start using KeyLines.