Highcharts Demo

author(s): Torstein Hønsi

by mizobata

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.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

var screenReaderSectionFormatter = function(chart) {
 console.log('aaa')
    var options = chart.options,
        chartTypes = chart.types || [],
        formatContext = {
            chart: chart,
            numSeries: chart.series && chart.series.length
        },
        axesDesc = (
            chartTypes.length === 1 && chartTypes[0] === 'pie' ||
            chartTypes[0] === 'map'
        ) && {} || chart.getAxesDescription();

    return '<div>' + chart.langFormat(
            'accessibility.navigationHint', formatContext
        ) + '<br>' +
        (
            options.title.text ?
            options.title.text :
            chart.langFormat(
                'accessibility.defaultChartTitle', formatContext
            )
        ) +
        (
            options.subtitle && options.subtitle.text ?
            '. ' + options.subtitle.text :
            ''
        ) +
        '<br>' + chart.langFormat(
            'accessibility.longDescriptionHeading', formatContext
        ) + '<br>' +
        (
            options.chart.description || chart.langFormat(
                'accessibility.noDescription', formatContext
            )
        ) +
        '<br>' + chart.langFormat(
            'accessibility.structureHeading', formatContext
        ) + '<br>' +
        (
            options.chart.typeDescription ||
            chart.getTypeDescription()
        ) + '<br>' +
        (axesDesc.xAxis ? (
            '<div>' + axesDesc.xAxis + '</div>'
        ) : '') +
        (axesDesc.yAxis ? (
            '<div>' + axesDesc.yAxis + '</div>'
        ) : '');
};

Highcharts.chart('container', {
    accessibility: {
        screenReaderSectionFormatter: screenReaderSectionFormatter
    },

    chart: {
        type: 'spline',
        description: 'Most commonly used desktop screen readers from January 2009 to July 2015 as reported in the Webaim Survey. JAWS remains the most used screen reader, but is steadily declining. ZoomText and WindowEyes are both displaying...