Formatting screenreader description of y axis range

[lbahrami]

Hello, hoping someone can help me get past an accessibility dead end!

I'm using Highcharts 11.1.0 in a Svelte application. The app contains multiple charts, and on some our y axis values are measured in percentages, while on others those values are measured in currency.

I've used the `yAxis.labels.formatter` property to concatenate dollar signs or percent signs to these values (see image.) However, I can't figure out how to replicate that formatting in the screenreader description of the y axis range.

I can't find any examples of how to dynamically format the `yAxis.accessibility.rangeDescription` property. I also can't find any examples of how to specifically access the range start and range end values to provide to the `lang.accessibility.axis.yAxisDescriptionSingular` property.

Here's the code I am using to achieve the results in the screenshot below. This range description without units has proven to be confusing in our user testing with screenreader-only users.

Code: Select all

  
  Highcharts.setOptions({
    lang: {
      accessibility: {
        axis: {
          yAxisDescriptionSingular: `{ranges[0]}`
        }
      }
    }
  })
  

Thank you so much for your help!

[jedrzej.r]

Hi!

Welcome to our forum and thanks for reaching out to us with your question!

Unfortunately, I don't think it's possibile to dynamically change the y-axis range description, as the rangeDescription is overriden in chart config before the chart is initialized. You can also take a look at source code responsible for the axis range description for better understanding of this property: https://github.com/highcharts/highchart ... #L111-L143.

As a workaround, after the chart has loaded, you can make use of getExtremes method and update y-axis accesibility.rangeDescription.

Demo: https://jsfiddle.net/BlackLabel/dqhfj9tp/

API: https://api.highcharts.com/class-refere ... etExtremes

Let me know if you have any further questions!
Best regards!