1

 
 Highcharts.chart('container',{

            chart: {
                //renderTo: document.getElementById("container"),
                type: 'column'
            },
                        accessibility: {
                description:'access description'
            },
            title: {
                text: 'this is the graph'
            },
               xAxis: {
                categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ],
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0,
            showInLegend: true
        }
    },
    series: [{
        name: 'Tokyo',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
       

    },
    {
        name: 'japan',
        data: [29.9, 73.5, 106.4, 45.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

    }]
        });
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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>
<script src="https://code.highcharts.com/themes/high-contrast-light.js"></script>

<div id="container" tabindex="0" style="padding: 10px 1px 1px 1px; height: 240px; width: 500px;"></div>


                                                    

I have a column chart with two series. The narrator creates issue in reading the data in such scenario whereas with one series, it's working. Any insights on this?

Demo project: jsfiddle.net/pfsbyxwz/3

4
  • Configuration options here, have you made sure to caption all items separately? Looks like there's only one description in your code. highcharts.com/docs/accessibility/accessibility-module. Accessible demos here: highcharts.com/demo#accessible-charts Commented Mar 2, 2021 at 17:54
  • Hey @NathanielFlick I added separate descriptions as well. Can you please guide me on what tags are required to enable accessibility for multiple columns. Also, what is the key combination required to read the data (I am using Chrome - with inbuilt narrator using Ctr+Win+Enter) . As of now, using, Tab plus arrow keys combination. Commented Mar 3, 2021 at 5:53
  • Hey, check out this post here, has some more detailed information: stackoverflow.com/questions/33408398/… Commented Mar 3, 2021 at 21:02
  • Are you able to navigate between points without using the scan mode, but just using the tab and the left/right arrows? Like I did in this video: hnet.com/video-to-gif/viewimage/… Commented Mar 5, 2021 at 12:14

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.