Highcharts Demo

author(s): Torstein Hønsi

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

caption {
    padding-bottom: 5px;
    font-family: 'Verdana';
    font-size: 14pt;
    font-weight: bold;
    color: #555555;
}

table {
    font-family: 'Verdana';
    font-size: 12pt;
    color: #555555;
    border-collapse: collapse;
    border: 3px solid #CCCCCC;
    margin: 2px auto;
}

tr {
    border-bottom: 2px solid #EEEEEE;
}

th {
    border-left: 2px solid #EEEEEE;
    border-right: 2px solid #EEEEEE;
    padding: 12px 15px;
    border-collapse: collapse;
}

th[scope="col"] {
    background-color: #ffffee;
}

th[scope="row"] {
    background-color: #f0fcff;
    text-align: left;
}

td {
    border-left: 2px solid #EEEEEE;
    border-right: 2px solid #EEEEEE;
    padding: 12px 15px;
    border-collapse: collapse;
}

JavaScript

// Add sequential tab indices to all charts in the page. Takes optional offset parameter, defaults to 5.
// Call function after charts have been created.
function addSequentialTabIx(offset) {
    var each = Highcharts.each,
        ix = Highcharts.pick(offset, 5);

    each(Highcharts.charts, function(chart) {
        chart.container.setAttribute('tabindex', ix++);
		chart.container.firstChild.setAttribute('tabindex', ix++);

        // Add to points
        each(chart.series, function(series) {
            var firstPointEl = series.points[0] && series.points[0].graphic && series.points[0].graphic.element,
            	seriesEl = firstPointEl && firstPointEl.parentNode || series.graph && series.graph.element || series.group && series.group.element;
			if (seriesEl) {
                seriesEl.setAttribute('tabindex', ix++);
            }

            each(series.points, function(point) {
                if (point.graphic && point.graphic.element) {
                    point.graphic.element.setAttribute('tabindex', ix++);
					point.graphic.element.onfocus = function () {
                    	point.highlight();
                    };
                }
            });
        });

        // Legend
        each(chart.legend.allItems, function(legendItem) {
            if (legendItem.legendGroup.element) {
                legendItem.legendGroup.element.setAttribute('tabindex', ix++);
            }
        });

        // Export menu is dynamically shown, but we can add index to the button here
        each(chart.container.getElementsByClassName('highcharts-contextbutton'), function(listItem) {
            listItem.setAttribute('tabindex', ix++);
        });
        ix += 10; // Leave room for dynamically added context menu indices.
    });
}

Highcharts.wrap(Highcharts.Chart.prototype, 'addAccessibleContextMenuAttribs', function(proceed) {
    proceed.call(this); // Call original function
    var exportList = this.exportDivElements,
        menuBtn =...