Arrow Keys on heatmap Not Functional When Screenreader Active about highcharts

[oysteinmoseng]

Hi Matt!

Screen readers typically override keyboard shortcuts when they run. Individual screen readers have various mechanisms for passing through keys to the webpage. In other words, this is expected behavior, and screen reader users can interact with the charts through mechanisms familiar to them. This is validated through user testing with screen reader users.

With that said, we are working on a new accessibility model that makes use of custom keyboard commands, and enables multi-dimensional navigation as you are requesting. The initial tests are promising, but in order not to be confusing to the users, a lot of care has to be taken to give instructions as the users navigate. You can expect more functionality in Highcharts later this year and in 2025 in this area.

I'm closing this particular issue for now, but feel free to comment if you have any further questions or feedback.

[longmatthewh]

Thank you for the response, but it's unclear to me how a screen reader user is supposed to navigate the heatmap.

[longmatthewh]

@oysteinmoseng ...adding to my last comment/question.

screen reader users can interact with the charts through mechanisms familiar to them

I am definitely curious about:

1. Current expected interactions with the chart for screen reader users, because at least the heatmap doesn't seem to be usable by screen reader users.
2. Any info you could provide about the new accessibility model coming in the future.

[oysteinmoseng]

@longmatthewh Sure, let me try to elaborate.

1. Screen reader users will by default, upon reaching the chart, get an overview description of the chart, including the title, chart type, axis information and so on. Once they get to the interactive chart, they should be able to navigate through individual series and data points as they would through any web document, similarly to a list. The points are marked up as role="img" with aria-labels. With VoiceOver on desktop, you would navigate using VO+arrow L/R at this point, and the screen reader should step through each data point linearly in order. By default, series are marked up as region landmarks, allowing the user to navigate between data series more quickly.

2. There is not much I can share in terms of details yet, as we need to do extensive user testing to determine the best interaction models for different types of charts. The goal, however, is to provide smarter defaults that allow more complex charts to be navigated using custom keyboard commands. Of course as with anything Highcharts related, we will make sure the experience is customizable in case you want to make changes for your particular use case.