Hi,
I'm trying to satisfy WCAG 2 requirements using KendoReact Charts. The only documentation I can find is specific to jQuery: https://docs.telerik.com/kendo-ui/accessibility/five-tips-for-accessible-charts-with-dataviz
The first approach discussed (Providing Text Descriptions) would satisfy requirements but uses a visible figcaption for the long description which is not ideal. Is there any way to set KendoReact Chart svg title and description? If not, is there another approach we can use?
Kind regards,
David
1 Answer, 1 is accepted
Hello, David,
As The KendoReact and Kendo UI Chart shared the same core engine all approaches listed there are valid for the KendoReact Chart as well.
Another option will be to wrap the Chart inside a DIV with tab-index 0 and an aria-label attribute which will provide a description of the Chart element.
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Iron
Veteran
Thanks for the response. I addressed this by adding a collapsible description and linking it to the chart using aria-decribedby.
However, I was referring specifically to the third option on the list: https://docs.telerik.com/kendo-ui/accessibility/five-tips-for-accessible-charts-with-dataviz#adding-title-and-desc-to-the-root-of-svg-elements
Is there any way to set KendoReact Chart svg title and description?
Kind regards,
David
Hi David,
Currently setting title and description to the SVG is not supported out of the box, however I would suggest to share your idea at Kendo React FeedbackPortal. We constantly evaluate the feature requests and the best ones are included in next Kendo React releases.
Until this feature is available you can try using the Chart ref to add manually these elements to the Chart svg:
<Chartref={chart => {
const title = document.createElement('title');
title.text = 'Some text';
chart.element.querySelector('svg').prepend(title);
}}
>