How to use image in chart category axis labels?

Thank you, @Stefan, for the fast response. Using the info found at the links you provided, we were able to create our own custom visual to display next to the Category text labels. Additionally, using the onAxisLabelClick prop of Chart component, we were able to trigger a popup window to open when clicking the category axis label.

However, we are required to meet (at minimum) Level AA of WCAG accessibility standards. For instance, we need a way for a keyboard-only user to be able to navigate (typically through tabbing or arrow keys) through the charts (axis labels, series points, etc), and thus need to provide them the ability to navigate to these axis labels (category axis labels only in our case) and select them to open the popup window.

Additionally, users with screen-readers need to be able to navigate to these parts of the charts and hear descriptive text of each part (labels, series points, popup window info, hover window info, etc). 

Can you point me to any examples/documentation that shows how we can achieve this with KendoReact charts?

If it helps, the chart in question is a line chart, however, we need to implement these type of accessibility features in each of our charts (column, etc).

Hello,

I'm happy to hear that you are able to successfully add the custom visuals.

For the accessibility standards, we have an article for the Kendo Ui for jQuery Chart (using the same JavaScript engine ) that show the current options for the Chart:

https://docs.telerik.com/kendo-ui/accessibility/five-tips-for-accessible-charts-with-dataviz

We also have a task to make the same article for KendoReact:

https://github.com/telerik/kendo-react/issues/1236

As they are the same Chart underneath, you can see if some of the options shown there can help with your application requirements.

Hi Stefan,

Thank you for this resource. After going through the options there, and other places in Kendo documentation, it seems that currently there is no way to provide keyboard navigation access to any of the chart components (series points, axis labels, etc.). It seems the only solutions offered for Kendo charts are to provide alternative options to users with accessibility needs (text descriptions of charts, grid data table in place of chart, adding titles and roles for screen reader users, etc). These options are all good, and we've implemented some of them as well, however, we also have a need to make the charts themselves accessible, such as through keyboard navigation. An example of what we would like to do can be found here from another 3rd party chart provider:

https://www.highcharts.com/blog/accessibility/#exploreFeatures

If you look at their keyboard navigation, it's possible to tab/arrow key through each part of their charts. 

Is there any current way that Kendo charts can support this level of accessibility that I may be missing? Alternatively, are these features something you are able to add into your charts so we can leverage them?

For reference, I believe to achieve this functionality, the charts and its components would need to be able to leverage some combination of using tabindex values and focus functionality. However, as I am new to React as a whole, my understanding of what's needed to add this functionality may not be correct.

Hello,

Thank you for the detailed description.

To confirm what is required, could you please take a look at this example with have in jQuery:

https://docs.telerik.com/kendo-ui/knowledge-base/chart-series-keyboard-navigation

If that is the requirement, we can transfer the example for React as well. If this is still missing important keyboard cases, we can suggest making a feature request for full built-in keyboard navigation support for the Chart:

https://feedback.telerik.com/kendo-react-ui

Hi Stefan,

Yes, this looks like the functionality that we are searching for! The only missing functionality from this that I can think of is to be able to show the tooltip when navigating through each series point via keyboard. However, I suspect this could be handled via onSeriesClick chart prop event (either with keyboard enter/return as 'click' or custom keydown event function for enter/return to represent 'click' event).

Could you please transfer the example for React?

Thank you!

Hi Stefan,

Thank you for this! I have voted for their request to be implemented. Do you have any idea when the team could begin working on these features/ETA for completion? I know it would be a huge help to many people in the accessibility world, and surely get more people to start using your charts.

Additionally, for the time being, would it still be possible to have the jQuery example you provided transferred to React? That would be a great deal of help for us while we await the greater changes to be implemented.

Hello,

Providing ETA for both the feature and the example depends on multiple dynamic factors.

It will depend on their popularity, how the other already planned tasks are moving, and how complex the feature and the example are.

We will update both items when we start working on them and have a more clear ETA.