[Solved]-Highcharts SVG accessibility-Highcharts

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/