Fix Accessibility issue related to ensuring text and images of text provide sufficient contrast

[pdaryamane]

Hi team,

We have an accessibility issue highlighted by Access Assistant (Google Chrome extension) that we need to ensure text and images of text provide sufficient contrast. The area pointed out in here is the desc tag which highcharts adds <desc aria-hidden="true">Created with Highcharts 11.4.7</desc>.
The error mentioned is "This desc contains text with a background color of #2b2c2e rgb(43, 44, 46) and foreground color of #212529 rgb(33, 37, 41) that is less than 18 point in size; or bold text less than 14 point in size that has a luminosity contrast ratio of 1.104, which is below 4.5:1". Could you please provide inputs as to how this can be fixed when we use paid version of highcharts? Thanks in advance.

Regards,
Prajakta

[pdaryamane]

Similar observations are for other controls on maps and different types of charts. path and svg elements inside charts or maps which are not directly visible on the screen, but have text inside them, how to fix contrast issue for them? Examples:

<text x="0" data-z-index="1" y="11" style="color: rgb(255, 255, 255); font-size: 0.7em; font-weight: bold; fill: rgb(255, 255, 255); text-decoration: none;"><tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-width="2px" stroke-linejoin="round">United States of America<tspan x="0" dy="0">​</tspan></tspan>United States of America</text>


<g class="highcharts-no-tooltip highcharts-button highcharts-map-navigation highcharts-zoom-in" data-z-index="5" transform="translate(10,463)" style="cursor: pointer; fill: rgb(252, 252, 252);" aria-hidden="false" tabindex="-1" role="button" aria-label="Zoom chart"><title>Zoom in</title><path fill="#4A4B54" class="highcharts-button-box" d="M 1.5 0.5 L 27.5 0.5 A 1 1 0 0 1 28.5 1.5 L 28.5 28.5 A 0 0 0 0 1 28.5 28.5 L 0.5 28.5 A 0 0 0 0 1 0.5 28.5 L 0.5 1.5 A 1 1 0 0 1 1.5 0.5 Z" stroke="#1E1F21" stroke-width="1"></path><path fill="none" d="M 8 14 L 21 14 M 14.5 8 L 14.5 20" class="highcharts-button-symbol" stroke="#FCFCFC" stroke-width="3" stroke-linecap="round"></path><text x="14" data-z-index="1" y="19.5" style="color: rgb(252, 252, 252); font-size: 1em; font-weight: bold; fill: rgb(252, 252, 252);"></text></g>

[andrzej.b]

Hi,

Thanks for letting us know about this issue.

It seems that it is a bug, and as such it exceeds forum support capabilities. I invite you to raise a bug ticket directly to the development team on GitHub here: https://github.com/highcharts/highchart ... new/choose
Once you create the ticket, you can watch this issue and track any information and workarounds for this one.

Best regards,

[pdaryamane]

Thank you for the reply, I will raise a bug to have a fix for this. What is the workaround meanwhile to tackle the accessibility issues highlighted by Tools for elements added inside Highcharts?

[pdaryamane]

https://github.com/highcharts/highcharts/issues/21867 raised for the issue

[andrzej.b]

Hi,

Thanks a lot for creating the ticket. Now, you will be updated on the issue and workarounds, which will appear on GitHub to make it available more easily for anyone needing it. From our experience, this is the most efficient way. I'm sorry that I couldn't offer you a quick fix, and I hope you will get help from GitHub support as soon as possible.

If anything else pops up, please let us know.

Best regards,