Highcharts: Accessible, Interactive Charts and Graphs

As an educator, I am always seeking information about how to make digital resources accessible for students who rely on a screen reader or who need low vision features. Data visualizations - such as charts and graphs - can be challenging to represent in non-visual ways. I recently stumbled across Highcharts and am wondering why I have not heard about it! If you are using Highcharts, please share your experiences!

What are interactive charts, graphs and maps?

Digital materials are dynamic and are no longer static like print materials; these digital resources are interactive, meaning that the user can interact with and modify elements in a chart or graph. Examples: Users can zoom in to find specific data, activate evolving data through a span of time, or hover the cursor over a data point to hear or see the specific information related to that point. These dynamic charts and graphs are not easily replicated in a static print chart or graph.

Example: Word Population, a bar chart race graph. The horizontal bar chart has 10 countries listed and their populations for a given year - starting in 1960 and running through 2018. When the play button is activated (or the slider is used), the year changes and the dynamic bar chart changes to show the population in that particular year. When the play button is used, the bars appear to race across the screen as the populations increase. View this example and others in this Highcharts blog, Bar Chart for Categorical Data.

Image 1: World Population, 1960 bar chart

Screenshot of Highchart World Population in 1960 with China far in the lead with 600M, India at 400M and US under 200M.

Image 2: World Population, 2018 bar chart

screenshot of dynamic World Population 2018 with China barely leading with 1.39 billion, India 1.35 billion, and US 326 million.

What is Highcharts?

Highcharts is a library written purely in JavaScript used to enhance web applications and mobile apps by inserting charts capable of interaction. Highcharts is free to use for personal projects, school websites and non-profit organizations.

Example of a chart created with Highcharts Accessibility Module and how a screen reader can interact with this line chart. This example is from the Highcharts for Accessibility website page, located here.

Title of chart: Most Common Desktop Screen Readers

Written description of chart: The line chart displays the most commonly used screen readers in surveys taken by WebAIM from December 2010 to September 2019. JAWS was the most used screen reader until 2019, when NVDA took over. VoiceOver is the third most used screen reader, followed by Narrator. ZoomText/Fusion had a surge in 2015, but usage is otherwise low. The overall use of other screen readers has declined drastically the past few years.

Video demonstrates a screen reader user navigating to desired areas of the line chart. The video starts with the user exploring the first data point for NVDA and then the first data point to VoiceOver. The user then chooses to listen to the first 4 data points for VoiceOver, then moves up to compare the NVDA's 4th data point and JAWS 4th data point. Next, the user chooses to follow JAWS 5th data point. See Most common Desktop Screen Readers video below:

 

What makes this interaction different?

Typically, a user who relies on a screen reader will have to listen to a full description of each data point on a line chart. If the student needs to find a specific point, he has to listen to the full description in its entirety again.  As an educator who has observed many students interacting with descriptions of line charts, the majority of the students are overwhelmed with data if the chart has numerous points. Most students will "zone out" and not listen to the full description, will become bored, or will skip the description. When taking a high-stakes assessment, I have observed students randomly picking an answer rather than listening to the full description again.

With this interactive line chart, the student can explore as desired and can choose to navigate quickly to find a specific data point. This tends to spark the student's curiosity about the information presented in the chart. The student is actively engaged in exploring the chart, which supports the student's attention to absorb data details. Just like his sighted peers, the student can skip unnecessary data and zone in to find the specific answer to the test question.

Highcharts accessibility features

Highcharts has numerous accessibility features, including sections with information, graphs and videos on:

  • Keyboard Navigation
  • Screen Readers
  • Low Vision Features
  • Voice Input
  • Tactile Export: Users can download an SVG version of the chart used to produce an embossed tactile graphic
  • Sonification: Highly effective method used to convey trends and patterns quickly
  • Cognitive Accessibility
  • Internationalization 

Note: For best results, use Google Chrome to access the videos embedded in the Highcharts website. Explore the interactive example graphs with a screen reader; if exploring without a screen reader, hover your cursor over the different parts of the graph.

Why should websites/mobile apps have accessible charts and graphs?

The video below talks about Highcharts and accessibility, including websites with interactive charts and graphs and the importance of websites having accessible charts and graphs used by employees.

 

Students and accessible charts and graphs?

In the Highcharts video above, the need for accessibility in the workforce was discussed. What about educational websites and platforms for K-12 students and/or college students? This need for accessible charts and graphs trickles down to college and K-12, where students are learning to use technology to access digital resources and can benefit from accessible digital materials to complete coursework. As a 21st century educator - especially during times of remote instruction - I see students are using a variety of digital curriculums; these curriculums do not provide accessible, interactive digital charts and graphs for K-12 students. When resources like Highcharts are available, why are ppublishers of online curriculums, digital textbook, and assessments not taking advantage of available accessible resources? Highcharts could be one answer to this issue! As a community, we need to advocate for this!

Does your school/institution use Blackboard Ally? Check out this post: Blackboard Ally and Highcharts Working Together to Improve Accessibility in Higher Education.