Accessibility
KeyLines is a visual tool, so we don't support many of the accessibility requirements for non-visual representations described in W3C’s Web Content Accessibility Guidelines (WCAG) 2.0 and Section 508 of the Rehabilitation Act of 1973. Having said that, we work hard to make sure you can create applications that are as accessible and easy to use as possible. Here are some guidelines.
Browser and operating system support
Operating systems and browsers have built-in accessibility features such as screen magnifiers, keyboard shortcuts and system speech packages. Check their accessibility documentation to see what comes for free. For example:
Using a keyboard instead of a mouse
KeyLines supports the following shortcuts by default, although some keys may differ depending on your keyboard:
| Action | Shortcut |
|---|---|
| Cancel and revert active dragging | Esc |
| Delete selected items | Del |
| Move selected items | Up, down, left, right arrows |
| Play timebar animation | Space |
| Select all selectable items | consistentCtrl + A |
Some standard mouse-free navigation is supported by your browser, such as using the TAB key to cycle through form controls.
You can attach to KeyLines or JavaScript events to create more shortcuts within your application. Typically, you'll attach to the chart's key-down event to trigger behaviours while the chart has focus, or to the page's keydown event otherwise. For examples of both, see the Keyboard Shortcuts demo.
In order for events bound to the KeyLines chart or HTML element to fire, the chart must first be focussed. This can be done by giving the focus to KeyLines element, for example:
document.getElementById('kl').focus(true); When planning keyboard shortcuts for your application, you should avoid overriding native browser and operating system shortcuts that affect the browser behaviour (e.g. Ctrl+N, Ctrl+O, Ctrl+S, Ctrl+P, Ctrl+W). Instead, it's better to extend native browser shortcuts for the page content (e.g. Ctrl+C/V/X/D, Ctrl+Z, Ctrl+A, Ctrl+F, Space).
Creating text versions of charts
To create a text version of a chart, use chart.serialize to export the chart content and parse it into text. You may consider creating lists of node and link labels. The output can be reused by a text reader or text-to-speech system.
If you need to support alternative text for images, remove the JSON formatting from the text version of your chart and add hidden text boxes that describe the image. Your text-to-speech system will then be able to process them.
Working with audio
KeyLines does not have built-in text-to-speech capabilities. If you want to play a chart animation at the same time as an audio soundtrack you’ve created, use the chart.layout time option to make sure the animation matches the audio length.
You can also bind audio files to hover events so that labels are ‘read out loud’ when a user moves their mouse pointer over items.
Choosing colours
It’s important to choose colours carefully. Users with colour deficiencies and blindness have difficulty distinguishing between contrasting colours with similar hues, saturation and lightness. There are a number of free tools that can check your colour schemes for accessibility, including this useful Colour Contrast Check.
Avoid relying on colour alone to convey important information on your chart. Make sure your users can select alternative options such as size, halos, glyphs or animation. For examples, see the Node Styles demo.
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 adds an animated effect to nodes and links. If your users may be sensitive to flashing images, allow them to turn off this feature, or make sure the time and colour options comply with the W3C guidelines.