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.
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.
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.
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.
FREE: Start your KeyLines trial today
Visualize your data! Request full access to our KeyLines SDK, demos and live-coding playground.
