Using OpenKeyNav to Enhance the Keyboard-Accessibility of Web-based Data Visualization Tools

Three cropped screenshots of Voyager, labelled A through C, with arrows pointing from A to B and from B to C. A shows a two-column layout, with a list of data field 'pills' on the left, and a list of empty data shelves (encodings, marks, facets and more) on the right. The data field pills on the left column are all given pink labels (unique alphabetic letters for each) and surrounded with a pink outline. B shows the same view but cropped to part of the layout. Here, only one of the pills in the left column is labeled, this time with a small dot instead of a letter. The right column's empty shelves are highlighted green with the words 'drop a field here' and have the same pink outlines with alphabetic labels. C shows the same view but cropped. Here, there are no pink highlights. Instead, on the encoding field called 'x', there is now a filled data field called 'Major_Genre'.

Abstract

Many data visualization tools require a mouse. While such tools widen access to data communication and expression, their implementations are difficult or impossible to use by people with certain disabilities who experience difficulties using a mouse. What if people could use them as easily with a keyboard? OpenKeyNav is a zero-dependency JavaScript code library that exposes a developer-friendly API for initiating keyboard accessibility enhancements. We demonstrate a usage scenario of OpenKeyNav for improving the keyboard-accessibility of Voyager 2, an open-source web-based data visualization tool based on the shelf configuration similar to industry-leading Tableau. Since mouse-driven interactions such as drag-and-drop are found in software in a broad range of industries, the interaction methods we describe have potential implications for the education, employment, and autonomy of people with motor disabilities in various fields. A demonstration is at https://voyager-keyboard-demo.github.io/. Its instructions are at https://github.com/voyager-keyboard-demo/voyager-keyboard-demo.github.io/

Citation

L Weru, S L’Yi, TC Smits, N Gehlenborg. “Using OpenKeyNav to Enhance the Keyboard-Accessibility of Web-based Data Visualization Tools”, OSF Preprints (2024). doi:10.31219/osf.io/3wjsa