Bill Holton
Charts and graphs. Whether its Covid statistics, budgeting info or any other numerical or statistical data, increasingly, charts and graphs are being used to present information in a consumer-friendly manner. “research shows that people don’t want to read text—all they want is a quick visualization in an attractive chart or graph,” says Ather Sharif, a University of Washington doctoral student in the Paul G. Allen School of Computer Science & Engineering. A heat map of voter turnout is ever so much easier to digest than a 500-cell table containing the same data set. “If I’m looking at that heat map I can pull out whatever information I am interested in,” says Sharif, “Maybe it’s my own state, or maybe it’s the overall trend or the maximum values."
A text-based table may provide the screen reader or braille user the raw data, but it does a poor job of presenting the actual information. Sharif makes a distinction between equality and equity. “If you provide somebody with a table you are making it equal as far as the information. But imagine a table containing 10,000 rows or more.”
When web developers accompany charts and graphs with data tables they’ve only made visible to screen readers it’s up to the user to mentally calculate the minimum, maximum, mean and medium—information that’s fairly obvious to the sighted user. And if it’s a bell curve listing standard deviations unless you download that table and run it through a spread sheet you are basically out of luck.
“Developers often fail to consider the cognitive load this puts on the user,” says Sharif. “They offer equal data, but there’s little equity in the one-dimensional text experience.”
“There is a start and an end of a sentence and everything else comes in between,” adds Jacob O. Wobbrock, UW professor in the Information School. “But as soon as you move things into two dimensional spaces, such as visualizations, there’s no clear start and finish. It’s just not structured in the same way, which means there’s no obvious entry point or sequencing for screen readers.” Says Sharif, “If two people look at the same chart they are usually having two separate experiences. One individual might hone in on the average, or mean, and the other might spot an unusual distribution or a particular outlier. So how can we justify a single alt text label for that chart?” he asks. “Unfortunately, screen reader and braille users have been told that tabular data is their best option. Few have actually stopped to ask, ‘Is there something that could be better than best?’” Sharif and his team members think they've come up with a solution. It’s called VoxLens, and here’s how it works.
Introducing VoxLens
“We wanted to make it possible for screen reader users to get more of the information they need without having to wade through tables or incredibly long alt tags most developers aren’t going to provide, anyway,” says Sharif. “We also wanted to make it as simple as possible for developers to implement and stay consistent among various platforms. Also, screen reader and braille users should not have to rely on special software or plugins to access the information.” For example, this set of VoxLens sample graphs available from the team informs the screen reader user: Graph with title: COVID-19 Cases per US State Do you want to interact? To listen to instructions on how to interact with the graph press control plus shift plus I or control plus shift plus 4. Key combinations must be pressed all together and in order. Graphic- Graph with title: COVID-19 Cases per US State. To listen to instructions on how to interact with the graph, press CTRL + SHIFT + I or CTRL + SHIFT + 4. Pressing this key combination calls up: I understand you’re looking for instructions. Graph with title: COVID-19 Cases per US State. To interact with the graph, press CTRL + SHIFT + A or CTRL + SHIFT + 1 all together and in order. You’ll hear a beep sound, after which you can ask a question such as what is the average or what is the maximum value in the graph. To hear the textual summary of the graph, press CTRL + SHIFT + S or CTRL + SHIFT + 2. To hear the audio graph, press CTRL + SHIFT + M or CTRL + SHIFT + 3. To repeat these instructions, press CTRL + SHIFT + I or CTRL + SHIFT + 4. Let’s take these three options in reverse order. Control plus shift plus M invokes a rising and falling tonal review of the data. In the Covid example this is not at all useful, since there is no way to link the data points with specific states. But for other bar or line charts it offers a quick audible summary of the peaks and dips in relative time. The summary option will differ depending on the visualization type and subject, but for the example Covid chart: I understand you’re looking for summary. Graph with title: COVID-19 Cases per US State. The X-axis is State. The Y-axis is Cases. The maximum data point is 8,767,944 belonging to California, and the minimum data point is 108,577 belonging to Vermont. The average is 1,514,426.41. The charts and graphs are created using JavaScript libraries that have the data underneath. “We extract the data then pull out all the information,” says Sharif. “There’s no installation or extra processing required by the screen reader user. It should just work. We likewise remove the burden on the developer side. VoxLens requires a single line of JavaScript and we do the rest.” The VoxLens resources are available via the Open-source GitHub Repo. Visualizations must be created using JavaScript libraries, such as D3 , chart.js or Google Sheets. On the user end, to date it’s only been thoroughly tested using Google Chrome. However the team is working on expanding to other popular visualization platforms and browser options.
Another current limitation is that VoxLens only works with visualizations in a single dimension. For example, the program can digest and interpret a daily stock chart, the highs and lows, overall averages, etc., but cannot currently work with, say, a price line compared to a moving average of daily closing prices. Currently VoxLens supports the following commands: maximum, minimum, average, mean, median, mode, standard deviation, and total. “More importantly, you can extract individual data points,” says Sharif. “For example, in the sample graphs you can say ‘What is the value for California?’ You can also ask for more than one data point. For example, ‘what is the value for California and Illinois?’ Need help? Say "instructions," or "directions," or "help" to hear the instructions. You can also say "commands" to hear all the list of supported commands.
For now, VoxLens is only available on web pages—e-textbooks and PDFs are not supported. “We are hoping to add these capabilities and more as we move forward,” says Sharif.
Are you in contact with a web developer who might be willing to enhance their visualizations with VoxLens? Consider clicking the share button and sending a copy their way.
Where to learn more
- The VoxLens Open-source GitHub Repo
- VoxLens examples
- Research paper: VoxLens: Making Online Data Visualizations Accessible with an Interactive JavaScript Plug-In
This article is made possible in part by generous funding from the James H. and Alice Teubert Charitable Trust, Huntington, West Virginia.
