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.
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.
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:
KeyLines supports the following shortcuts by default, although some keys may differ depending on your keyboard:
|Select all items||Ctrl + A|
|Edit the label of a selected item||F2|
|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.
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.
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.
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:
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.
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.