highcharts-accessible
This plugin improves accessibility of the graphs rendered by Highcharts.
About
It works by automatically applying three best practices for accessible SVGs.
- Automatically creates and inserts intelligent title and description tags.
- The plugin highjacks these tags two tags in the rendered SVG and adds informative text that describes what the graph is showing. Developers have the option of inserting their own custom text, or allowing the plugin to write the key-takeaways from the chart. Its important that an automated option exists, or it will be easy for web developers to overlook this crucial step.
- The plugin highjacks these tags two tags in the rendered SVG and adds informative text that describes what the graph is showing. Developers have the option of inserting their own custom text, or allowing the plugin to write the key-takeaways from the chart. Its important that an automated option exists, or it will be easy for web developers to overlook this crucial step.
- Inserts ARIA attributes and language definition in the SVG to further optimize the chart for screen readers
- Automatically inserts a link to a downloadable CSV of the data.
- A link to a downloadable CSV file containing all the data is inserted after the chart. This gives visually-impaired users the same opportunity to access all the data, and do a 'deep-dive' if they want.
Highchart SVG rendered without the plugin:
Highchart SVG rendered with the plugin:
Dependency
Include the export-csv.js plugin to enable the CSV functionality.
Installation
Import this plugin after highcharts.js and export-csv.js, like this:
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="export-csv.js"></script>
<script type="text/javascript" src="highcharts-accessible.js"></script>
Usage
All parameters are optional, but accessible settings: {} must be called in order to run the plugin.
$("#container").highcharts({
accessibleSettings: { autoAccessible: Boolean
Allow a summary of the chart to be written automatically. This is the primary purpose of the plugin. If set to false, a user-defined title and description must be provided. Defaults totrue.csvLinkText: String
Text used in link to download a CSV file. If you have more than one highchart SVG on a page, it is important to add text that helps users associate the link with the chart. Defaults to “Download chart data.”.langAttribute: String
Change the language attribute for the SVG. More information on lang attribute. Defaults to “en” for English.timeSeries:Boolean
Indicate if the dataset has a time element. This affects how the autoAccessible feature process the text. Defaults totrue.userDesc: String
Text to be used in the SVG’s description tag. This will override the autoAccessible feature. I recommend using this option and writing your own summary of what the chart shows. It will likely be more readable than what the autoAccessible script can generate. Defaults tonull.userTitle: String
Text to be used in the SVG’s title tag. If this is tag is not used, access will use the text in highchart’s title.text in the SVG title tag. If that is empty, it defaults to "This is a data visualization. Please see the following description tag for a synopsis of what it shows.".xUnitPrefix: String
Text to prepend to the x value in the description tag. Defaults to empty string.xUnitSuffix: String
Text to append to the x value in the description tag. Defaults to empty string.yUnitPrefix: String
Text to prepend to the y value in the description tag. Defaults to empty string.yUnitSuffix: String
Text to append to the y value in the description tag. Defaults to empty string.
}
}); Background
The vast majority of charts on the web are not accessible to the visually impaired. I believe the problem stems from the fundamental purpose of a chart, which is to quickly and concisely explain trends in data that would be hard to do with words. So, how do we put into words something that was specifically created to avoid them?
A common solution is to add a CSV file or insert a table of all the data displayed in the chart. This does give all users the same opportunity to access the information, but it misses the goal of making a chart in the first place. Visually-impaired users have to download a CSV file, sift through all the data, and draw their own conclusions about what it means while sighted-users can simply glance at the visualization.
Instead of simply repeating all the data in a chart, this plugin attempts to summarize the key points the chart is likely to make, thereby doing a better job of aligning the accessibility feature with the actual purpose of making the visualization.
In addition, the plugin can generate the description text itself. Having a person actually write the text would be best, but this fallback ensures all charts will have some amount of accessibility.
"Inclusive design is good design."