Graph visualization tools and accessibility

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
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. For more details, explore the exciting events engine in KeyLines.

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.

A screen showing a graph visualization created using KeyLines
FREE: Start your KeyLines trial today

Visualize your data! Request full access to our KeyLines SDK, demos and live-coding playground.


How can we help you?

Request trial

Ready to start?

Request a free trial

Learn more

Want to learn more?

Read our white papers


Looking for success stories?

Browse our case studies

Registered in England and Wales with Company Number 07625370 | VAT Number 113 1740 61
6-8 Hills Road, Cambridge, CB2 1JP. All material © Cambridge Intelligence 2024.
Read our Privacy Policy.