Making charts accessible for people with visual impairments

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

Lucy Greco, a web accessibility expert at UC Berkeley, demonstrates the accessibility features of ScienceDirect during a RELX Corporate Responsibility Forum.
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.

Ted GiesSo 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, 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, 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.

Øystein Moseng, Core Developer for HighsoftHighcharts and other Highsoft products 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, 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 and Ted Gies present together at the <a target="_blank" href="">2016 CSUN Assistive Technology Conference</a>. (Photo by Tripp Narup)

For Lucy Greco, a test user for Highcharts who has been blind since birth, the difference was substantial.

Lucy Greco and her guide dog, Frances.“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. “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.

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, WebAIM and the DIAGRAM Center. IBM, whose colleagues serve on the W3C SVG accessibility task force, 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 RanginHadi Rangin, Highcharts test user and Information Technology Accessibility Specialist for Accessible Technology Services at the University of Washington, 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.

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.

In this first video demo below, the screen reader is not able 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

The second video, below, 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

The third and fourth videos, below, show navigating through the data points of a line and pie chart respectively, using a screen reader. The fourth demo also has subtitles.

Screen reader navigating data points in chart

Screen reader navigating data points in chart, with subtitles.

You can experience an additional demonstration of a chart accessible through keyboard navigation from Highsoft.

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

The ScienceDirect Accessibility Journey has been published in a special accessibility-themed issue 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: “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.


Written by

Alison Bert, DMA

Written by

Alison Bert, DMA

As Executive Editor of Strategic Communications at Elsevier, Dr. Alison Bert works with contributors around the world to publish daily stories for the global science and health communities. Previously, she was Editor-in-Chief of Elsevier Connect, which won the 2016 North American Excellence Award for Science & Education.

Alison joined Elsevier in 2007 from the world of journalism, where she was a business reporter and blogger for The Journal News, a Gannett daily newspaper in New York. In the previous century, she was a classical guitarist on the music faculty of Syracuse University. She received a doctorate in music from the University of Arizona, was Fulbright scholar in Spain, and studied in a master class with Andrés Segovia.
Written by

Lisa Marie Hayes

Written by

Lisa Marie Hayes

Lisa Marie Hayes is the Senior Communications Lead for the RELX Group Innovation Team, where she reports internally on innovation initiatives across the RELX Group businesses. Prior to joining RELX Group, Lisa was the Communications Manager for CK Franchising Inc, the franchisor for Comfort Keepers in-home care, and Reed Elsevier Technology Services, where she translated technical speak to everyday English. Earlier in her career, Lisa worked as a writer and editor for government contracting firms, wrote and reviewed government proposals and grants, and assessed writing proficiency on English learners’ TOEFL iBT exams.

Lisa transitioned to the world of writing, editing and communications from academia, where she worked as a university-level English and academic writing instructor at two US-accredited universities in Mexico. Lisa holds a master’s degree in Applied Linguistics from La Universidad de las Americas Puebla in Mexico and a dual bachelor’s degree in Spanish and English from the University of North Carolina at Charlotte.


comments powered by Disqus