Highcharts SVG accessibility - highcharts

Question

The SVG created by Highcharts has no title, no meaningful desc and no ARIA attributes, or at least I can't find anything in the API to set these. Following the tips at http://www.sitepoint.com/tips-accessible-svg/ I would like to be able to set the title of the SVG when I set http://api.highcharts.com/highcharts#title (or some alternative option). For desc I think I'd need an alternative option for sure - subtitle wouldn't fit the bill. If I set the title the attribute aria-labelledby="title" should be set on the svg tag. If I set title and desc it should be aria-labelledby="title desc" (apparently not all screen readers are compatible with aria-describedby). And the svg tag should also have a role="img" attribute.
Currently we are failing an accessibility review due to these issues.

Answer 1

Here is some info for someone landing to this page.
From high charts version 5 onward there is support for accessibility.
Here is the link with samples
https://www.highcharts.com/docs/chart-concepts/accessibility
It has support for keyboard navigation. It also include a hidden HTML screen reader information section above the chart with details about the chart structure and content. This can be read by screen readers after getting focus on the chart by up or down arrow keys.
One can also provide additional information to the screen reader via chart.description, series.description and point.description through which one can summarize the chart.
See example here which summarizes the chart using the description property.
$.getJSON('https://www.highcharts.com/samples/data/aapl-c.json', function (data) {
Highcharts.stockChart('container', {
chart: {
description: 'Chart shows Apple stock prices from mid 2008 to mid 2015. It shows steady growth with one significant peak lasting through most of 2012 before normalizing.'
},
title: {
text: 'Apple Stock Price 2008 to 2015'
},
subtitle: {
text: 'Accessible stock chart demo'
},
rangeSelector: {
selected: 1
},
navigator: {
series: {
description: 'Overview series for navigation' // The navigator series could be confusing to screen reader users.
}
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
});
http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/stock/accessibility/accessible-stock/
Example for support for dash style for better visibility
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-dashstyle/