Connect

Making charts accessible for people with visual impairments

December 8, 2020 | 8 min read

By Alison Bert, DMA, Lisa Marie Hayes

A collaboration between Elsevier and Highcharts sets a new standard for chart accessibility

Caption: Lucy Greco, a web accessibility expert at UC Berkeley, demonstrates the accessibility features of ScienceDirect during a RELX Corporate Responsibility Forum.

Imagine you’re visually impaired and you rely on a screen reader to read text aloud and interpret images for you on your computer. Would you be able to make sense of scientific charts and graphs? Or get any information about what they look like and the information they convey?

For many researchers in this position, the answer has been “no” – or in a limited way that is far from ideal. Typically they have to pay a reader or find a volunteer to assist.

After all, alternative text alone is unlikely to convey what is contained in the x and y axes, for example, or the detailed contours and underlying data of trend lines.

Web developers have traditionally addressed this issue by providing chart data in a separate table view the screen reader can pick up. However, this solution requires that the user switch to an alternate view in order to access the data – and this tabular view lacks the visual comparison of elements sighted users benefit from. Meanwhile, the inaccessible graphical chart remains on the page like a speedbump to understanding the overall content.

So colleagues at Elsevier set out to find a user-friendly way to make these charts and graphs fully accessible. “One of the first design goals we agreed upon was to create a single accessible version of a chart and not a separate accessible version,” said Ted Gies(opens in new tab/window), Elsevier’s User Experience Lead Specialist.

In the case of Scopus – which millions of researchers rely on as the world’s largest abstract and citation database of peer reviewed literature – the system uses a third-party software library, Highcharts(opens in new tab/window), to produce its charts and graphs.

As a result, members of the Scopus technology and product teams feared there wasn't much they could do about the problem. But when they discussed the limitations with Ted, he offered to contact Highsoft, the Norway-based company that makes Highcharts.

Highcharts and other Highsoft products(opens in new tab/window) are used by many of the world’s technology leaders, including IBM, Microsoft, GE, Facebook and MasterCard. And when they heard from Ted, they were eager to work with him to find a solution for Elsevier. “Instead of following established solutions, Ted was eager to explore new ideas in an attempt to improve the accessibility experience of charts,” said Øystein Moseng(opens in new tab/window), Core Developer for Highsoft, “and we embarked on a long process of trial, error and user testing to find a better solution.”

In their 8-month collaboration, Ted used his accessibility expertise to guide the creation of an improved system of descriptive tags for charts and graphs that is setting a new industry standard for accessibility.

“This project has sparked a discussion among experts in the field towards more accessible data visualization,” Øystein said. “We are hoping that our work can not only be a concrete improvement to our products but also help bring a new generation of accessibility to charts and graphics on the web."

Øystein Moseng, Core Developer for Highsoft

Ted and Øystein — Øystein Moseng and Ted Gies present together at the 2016 CSUN Assistive Technology Conference. (Photo by Tripp Narup)

For Lucy Greco(opens in new tab/window), a test user for Highcharts who has been blind since birth, the difference was substantial.

“This innovation allows me to interact with the chart and understand the relationships of all the components of the chart to all other components rather than just getting a description of the chart,” said Lucy, a Web Accessibility Evangelist for Information Services and Technology (IST) at the University of California, Berkeley(opens in new tab/window). “Charts and graphs are really important for us in academia, and Ted's and Øystein’s work has filled a gap, providing us with a solution we haven't had access to before.”

In her case, being able to interpret charts on her own is saving her time and money while enabling her to come up with an independent interpretation of the visualization.

I used to have to pay a reader or find a volunteer. Somebody else had to be involved, so I had to schedule the time to get the information. Now I can interpret charts on my own.

The other risk you take in using sighted assistance is that the person who’s giving you the information has their own interpretation of the chart, so you’re subject to their bias; you don’t get to form your own opinions on the information.

Lucy Greco and Frances — Lucy Greco and her guide dog, Frances.

The new features have various benefits:

They give users with visual impairments the ability to understand dynamic charts and get the information they need indepedently.
They ensure that Elsevier products are more fully accessible, which is a requirement for a large and growing number of customer contracts as well as a legal issue.
They provide a solution that can be used by companies and organizations around the world who want to make their website content accessible.

For his work on this project, Ted was recognized by Elsevier’s parent company on the RELX Group Innovation Honour Roll.

Next steps

Now, Elsevier colleagues are looking into applying this accessibility to other products that use Highcharts.

To support best practices in the industry, Ted and Øystein have shown their solution to a variety of thought leaders in accessible technology, including colleagues at IBM(opens in new tab/window), WebAIM(opens in new tab/window) and the DIAGRAM Center(opens in new tab/window). IBM, whose colleagues serve on the W3C SVG accessibility task force(opens in new tab/window), has also created accessible charts but with a much different approach, Ted said.

There are still open problems with making fully understandable and usable charts: for example, how to provide both the overall feel of the visualization and freedom of exploration for people who are blind or cognitively impaired. Sighted viewers perceive graphics in two or sometimes three dimensions and can scan to identify trends such as the peaks and valleys or sharp rises in a curve. Visualization trends are difficult to convey in a one-dimensional view such as when listening to a chart with a screen reader. Currently we are exploring sonification (or pitch/tone changes in audio) to convey rising or falling trends. Additionally there are embossed printers such as the ViewPlus Embosser, which will elegantly print raised line drawings so people who are blind can perceive a chart or graphic and have the freedom of exploration.

Hadi Rangin(opens in new tab/window), Highcharts test user and Information Technology Accessibility Specialist for Accessible Technology Services at the University of Washington(opens in new tab/window), said accessibility has come a long way since his early days working with Ted more than a decade ago:

Accessibility was quite new to most designers, developers and administrators at Elsevier at the time Ted started working on it,” Hadi said. “At that time, I was working for the University of Illinois, and both my boss (Dr. Jon Gunderson) and I worked with him very closely to educate him and a few Elsevier designers and developers about accessibility by demonstrating the issues and discussing the potential UX/UI as well as the coding solutions for all the problems we were facing at that time with Elsevier applications. Ted quickly developed a strong passion for accessibility and documented all the lessons learned, which he later put in a nice internal design and coding practice to be used by developers and designers. … We have presented with him about accessibility at the international conferences for many years, and over time he has brought more designers and developers on board, making Elsevier one of the more progressive companies in accessibility.

Video demos: Bringing charts to life for people who are blind

Traditionally, people with visual impairments navigate website content using screen readers that read aloud the text on the screen. When that screen reader encounters a graph or chart, it presents a problem because the graph or chart is a visual representation of data. Here are three videos to demonstrate this concept:

In this first video demo, the screen reader is unable to make sense of the chart; it simply reads the text elements in the chart. This was the experience of screen reader users before accessibility was worked into the charts: Screen reader unable to translate chart before accessibility(opens in new tab/window)
This second video shows a screen reader navigating to the chart in a webpage, entering the hidden information region for the chart. This is where Ted and the developers added the structure description of chart that could benefit screen reader users, such as the chart type, axis information (automatically generated), and a long description of what is found in the chart (supplied by the chart creator): Screen reader translating hidden information about chart details(opens in new tab/window)
The third video shows navigating through the data points of a line using a screen reader: Screen reader navigating data points in char(opens in new tab/window)

Accessibility in Learned Publishing – read a new paper by Ted Gies

The ScienceDirect Accessibility Journey(opens in new tab/window) has been published in a special accessibility-themed issue(opens in new tab/window) of Learned Publishing, the journal of the Association of Learned and Professional Society Publishers. Authored by Ted Gies, User Experience Lead Specialist at Elsevier, the article provides an insider’s view of Elsevier’s 16-year journey towards accessible digital publishing, with particular attention to ScienceDirect.

As editors Lettie Y. Conrad and Bill Kasdorf write(opens in new tab/window): “Accessibility is no longer a fringe topic on the margins of the academic publishing ledger. Instead, publishing in a manner that is accessible to all is central to our purpose.”

The issue is available via open access for the first year.

Contributors