Duplicate landmarks accessibility issue

[ozmendoza]

Happy 2021,

I am trying to fix accessibility issues for duplicate landmarks in the charts on this page https://www.unr.edu/pba/budget-office/data

It is specifically in the data labeling. How can I change the aria label attribute, without have to change the label it's self. For example in the chart "Appropriated expenditure budgets", I was able to fix the accessibility issue by changing the data label "Years 2016-2017" vs "2016-2017". I would rather leave the data label the way it is and change the aria label instead. I appreciate any help you can give me.

Thank you,
Oz

[sebastian.h]

Hi,

Welcome to our forum and thanks for contacting us with your question!
Thanks, happy new year to you

I suppose the solution is to set the accessibility.point.valueDescriptionFormat but I need to look at the chart configuration.
Here is a simple template: https://jsfiddle.net/BlackLabel/c8x7sgf3/, could you reproduce a simplified version of your case?

API References:
https://api.highcharts.com/highcharts/a ... tionFormat

Let me know how you are doing with this.
Best regards.

[ozmendoza]

Sebastian,

Thank you for your response. I tried your recommendation and it worked for fixing landmarks with duplicate names with the pie charts on the page, but not for the column charts. What I did instead is append a more descriptive label using the series.column.accessibility. https://api.highcharts.com/highcharts/s ... escription

This seems to be the solution I am looking for.

Here's an example I set up. https://jsfiddle.net/ozman2182/ekv57xbf/20/

[sebastian.h]

Hi,

Could you show me the chart configuration in this pie chart?
At which stage are the names duplicated? How are you testing?

I use VoiceOver and extension for chrome Screen Reader.
Each time it reads to me only the main texts of the title on the chart and then the points on the chart.
Do you want to also read the chart legend? This seems unsupported to me.

I added enabled: true in line 45 and line 86 for specific series, do you see any difference after test?

Code: Select all

      accessibility: {
        enabled: true,
      },

API References:
https://api.highcharts.com/highcharts/p ... ty.enabled
https://api.highcharts.com/highcharts/s ... ty.enabled

Live demo:
https://jsfiddle.net/BlackLabel/e0wp8m34/

Best regards.

[ozmendoza]

Hi, I wanted to update this post. This issue is fixed by updating the

Code: Select all

point.valueDescriptionFormat

as recommended. Thank you for your help.

[dominik.c]

Hello ozmendoza!

Thanks for sharing out with us the solution!

Best regards!