Making charts accessible for people with visual impairments
2020๋ 12์ 8์ผ | 8๋ถ ์ฝ๊ธฐ
์ ์: 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ย ์ ํญ/์ฐฝ์์ ์ด๊ธฐ, 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.
Highcharts 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."
Forย Lucy Grecoย ์ ํญ/์ฐฝ์์ ์ด๊ธฐ, 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ย ์ ํญ/์ฐฝ์์ ์ด๊ธฐ. โ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 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.
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ย ์ ํญ/์ฐฝ์์ ์ด๊ธฐ
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ย ์ ํญ/์ฐฝ์์ ์ด๊ธฐ
The third video shows navigating through the data points of a line using a screen reader: Screen reader navigating data points in charย ์ ํญ/์ฐฝ์์ ์ด๊ธฐ
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.