Posts: 14
Joined: Wed Jun 23, 2021 4:13 pm

PlotBands Accessibility

Tue Oct 26, 2021 3:15 pm

I'm using the accessibility module for HighCharts and looking to add plot bands to my chart.

However, when investigating the accessibility tree for the resulting chart, I can't find any mention fo the plot bands or the plot band label in it. When looking at the DOM/SVG of the chart, all of the plotband info is wrapped in `aria-hidden=true`.

Am I missing something? Is there any way to denote to a screen reader that there is a plot band and what the label is?

Here is a mockup, I was just using the Accessibility tab in Chrome Dev Tools:

Posts: 14
Joined: Wed Jun 23, 2021 4:13 pm

Re: PlotBands Accessibility

Tue Oct 26, 2021 3:26 pm

I forgot to mention that I also don't see an accessibility object in the API docs for plotbands like some other features have

Posts: 309
Joined: Tue Aug 24, 2021 1:32 pm

Re: PlotBands Accessibility

Thu Oct 28, 2021 10:51 am


Thanks for contacting us with your question!

I am not sure, but I would assume that plotBand could have been recognized as a decoration element, that's why aria-hidden is true by default.
If change aria-hidden to false, would it be relevant solution for you?

You can change it by adding following code:

Code: Select all

  chart: {
    events: {
      load: function() {
        var chart = this;
        chart.xAxis[0].plotLinesAndBandsGroups['bands-0'].element.ariaHidden = false;

If you have any suggestion how to improve the accessibility module, you can also post this idea in our user voice service: ... script-api r create a feature request on github.

Let me know if that was what you were looking for!
Magdalena Gut
Highcharts support engineer

Return to “Highcharts Usage”