Graph visualization tools and accessibility

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. For example, experienced users like using 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.

Part 1: 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 itemsCtrl + A
Edit the label of a selected itemF2
Play timebar animationSpace
Delete selected itemsDel
Move selected itemsUp, 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
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 app more accessible. Now let’s take a closer look at supported keyboard shortcuts.

Part 2: An overview of KeyLines’ keyboard shortcuts

You can bind events to control KeyLines from the keyboard, making graph visualization tools accessible without a mouse or touchscreen. Using the shortcuts you can navigate and manipulate the chart to perform different functions including:

  • Changing focus to a different visible node
  • Selecting or deselect the node currently in focus
  • Searching the chart
  • Zooming in and out
  • Panning the chart

You can also combine keyboard and mouse interactions for faster chart interactions. For example, holding down the command key while dragging to pan the chart instead of selecting nodes.

A screenshot of the Use Keyboard Shortcuts demo
A screenshot of the Use Keyboard Shortcuts demo

Ready to get started?

Everybody should be able to 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 KeyLines app.

Get started by requesting a free KeyLines trial today

More from our blog

Visit our blog