Kakedrage
Posts: 2
Joined: Fri May 06, 2022 1:57 pm

Hyperlink in subtitle is not focusable

Hi!

I have come across an accessibility problem where hyperlinks added to the subtitle and the title are not accessible by keyboard navigation. I only need it to work for the subtitle. The problem only occurs when the accessibility module is loaded and it works when it is not loaded.

I have made a fiddle that show the issue: http://jsfiddle.net/647r1ts0/2/
You can try with and without the accessibility module.

I first thought that the issue was caused by aria-hidden on the <text> element that surrounds the subtitle text. But nothing changed when i removed it using chart.subtitle.attr. I also tried adding tabindex="0" to the <a> element, but nothing changed.

I assume the problem has something to do with how the accessibility module handles focus, but that's a bit over my head.

Does anybody know of a way to fix this?

Thanks!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Hyperlink in subtitle is not focusable

Hello,

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

The accessibility module overrides the tab indexes of all items in the chart, therefore tabbing works without it.
To add keyboard navigation to a subtitle you can achieve this using accessibility.customComponents

Demo: https://jsfiddle.net/BlackLabel/jhpL9ex2/
API: https://api.highcharts.com/highcharts/a ... Components

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
Kakedrage
Posts: 2
Joined: Fri May 06, 2022 1:57 pm

Re: Hyperlink in subtitle is not focusable

Hi, again!

Thanks for your response, it was very helpful!
I am still having one problem and that is that while using keyboard navigation I get stuck when trying to navigate back to a place before the chart. Using shift tab only cycles between the subtitle custom component and the series. It seems that the 'prev' response does not leave the chart.

In this fiddle I have added a button at the beginning to illustrate my problem: https://jsfiddle.net/ra5xkhdt/
I am not able to navigate back to the button, with "Hello button" as text, after I have navigated into the chart.

Thanks again for any help!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Hyperlink in subtitle is not focusable

Hi,

Yes, I can see now. If you delete the first array in keyCodeMap, the problem will not occur.
Demo: https://jsfiddle.net/BlackLabel/eg3mxn7u/

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”