Posts: 1
Joined: Wed Aug 09, 2023 9:28 pm

Formatting screenreader description of y axis range

Tue Sep 19, 2023 6:14 pm

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

    lang: {
      accessibility: {
        axis: {
          yAxisDescriptionSingular: `{ranges[0]}`

Thank you so much for your help!

Posts: 534
Joined: Tue Jan 24, 2023 11:21 am

Re: Formatting screenreader description of y axis range

Wed Sep 20, 2023 2:22 pm


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: ... #L111-L143.

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


API: ... etExtremes

Let me know if you have any further questions!
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Usage”