Charts Accessibility - Keyboard Support if chart is clickable + Patterns Fill instead of solid fill

0 Answers 59 Views
Accessibility Charts
Akash
Top achievements
Rank 1
Iron
Akash asked on 12 Aug 2023, 03:01 PM | edited on 14 Aug 2023, 05:16 AM

Hi Team,

I've added everything to make sure charts are accessible but the issue is our data points are clickable and when we click on our data points the pivot/grid below the charts updates just like power bi charts.

I saw one document shared by kendo UI on charts accessibility:

The fundamental requirement that refers to and is fulfilled by the Kendo UI data visualization components is:

  • Section 508—"(a) A text equivalent for every non-text element shall be provided (e.g., via altlongdesc, or in-element content)."
  • WCAG 2.1—"Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language."

 

but this holds true when charts are not clickable.

 

Like this we're expecting to have focus on each data points:

Power bi is also using svg image and all data points and the x and y axis are operable through the keyboard. Please have a look.

1. Either any shortcut key so that it can navigate all the data points.

2. or Simple Navigation : Enter => and then arrow keys to navigate inside options.

Step 1: container is clickable

Step 2: 

Tab to navigate in between

Enter to go inside

esc: to exit

Step 3: After pressing enter, it goes inside.

 

 

Is it possible to create something like this.. This will make charts more accessible.

 

For more inspiration: Miro currently make it canvas objects accessible in June release with the help of help keys + hidden messages for screen readers.

 

-----------

Is it possible to add custom patterns like pattern fill instead of solid fill inside the charts so that we create differentiation apart from the colors also?

Nikolay
Telerik team
commented on 16 Aug 2023, 03:41 PM

Hi Akash,

Regarding the accessibility topic, I need to check this with the team. I will get back to you later.

As it comes to the texture pattern series below I will post some threads discussing this topic:

SO: https://stackoverflow.com/questions/36012520/kendo-bar-chart-with-texture-pattern

Forum: https://www.telerik.com/forums/change-line-style-from-solid-to-dashed

Regards,

Nikolay

Akash
Top achievements
Rank 1
Iron
commented on 25 Sep 2023, 11:21 AM

hey any comment on this ?
Nikolay
Telerik team
commented on 28 Sep 2023, 07:38 AM

Hi Akash,

Please accept my apologies for the delay in my reply.

First of all, I want to thank you for the feedback on the CHart accessibility topic, It is important and it has bee forwarded to the respective people.

The Team is already working on improving the Chart  A11Y and Keyboard Navigation. Here are the two GitHub issues:

However, these I believe are in a private repo and so I will summarize them here.

Action plan:

 - Add base support for accessibility – configuration options, events, element roles and focus management.
 - Implement accessibility rendering for SVG – roles, titles, focus management. The a11y specification will be based on it.
 - Experiment with accessible overlay for Canvas.
 - The Canvas element supports accessible content which is typically used as a fallback for browsers that don't support it.
 - The accessible content is now being repurposed to act as an accessibility overlay, accessible to screen readers.
 - The overlay is not visible and does not receive pointer events.
 - The overlay includes all focusable elements such as titles, legend items series points.
 - The drawFocusIfNeeded method can be used to draw focus rings on the Canvas when overlay elements are focused.

This Keyboard Navigation feature aims to add keyboard support to the Chart widget. Keyboard navigation will be enabled for points of the chart series, as well as legend items. Moving focus along these points allows screen readers to access the points' accessibility attributes.

Assistive technologies treat components like the various Charts and Gauges as images. To make them accessible, add a descriptive label or an alternative representation of the data. For example, a Chart may be represented by a table that duplicates the data in an accessible form. 

This is pointed out in the following documentation article: https://www.telerik.com/kendo-angular-ui-develop/components/accessibility/accessibility-compliance/#toc-special-considerations

Regards,

 

Akash
Top achievements
Rank 1
Iron
commented on 04 Dec 2023, 01:40 PM

Thanks, Nikolay, for the response.

Does the above thing only work for bar charts and pie charts?

Our Pie chart, Gauge chart, and doughnut Chart are also interactive through the mouse. Other chart libraries like Highcharts Power BI charts are keyboard accessible.

 

Charts Like:

  • Bar Chart
  • Waterfall Chart
  • Horizontal Bar Chart
  • Gauge Chart
  • Donut Chart
  • Heatmap Chart
  • Pie Chart

Also, what about the pattern fill support?

 

 

 

 

 

Nikolay
Telerik team
commented on 07 Dec 2023, 12:27 PM

Hi Akash,

I need dome time to investigate and will get back to you shortly.

Regards,

Nikolay

Nikolay
Telerik team
commented on 12 Dec 2023, 09:47 AM

Hi Akash,

The Keyboard Navigation for all Chart types is on its way. I am attaching a small md file where you can find detailed descriptions of different Chart types Accessibility and Keyboard support to be announced.

Regarding the series pattern fill currently not all Chart types are supporting it. There is a feature request for this and I recommend casting your vote in the below link:

Regards,

Nikolay

Akash
Top achievements
Rank 1
Iron
commented on 12 Dec 2023, 02:06 PM

Thank you, Nikolay. I have voted and left a comment for the requested feature. However, I noticed that this feature has been requested since 2016 and is still unplanned. Is there an estimated timeline for when we can expect this feature and the keyboard support mentioned above to be released?

Nikolay
Telerik team
commented on 15 Dec 2023, 09:49 AM

Hi Akash,

There is no timeframe for this to be implemented. Feature requests are prioritized based on their demand and business needs.

Nevertheless, I will bring up this feature to the planning meeting.

Regards,

Nikolay

 

Akash
Top achievements
Rank 1
Iron
commented on 13 Feb 2024, 06:04 PM

Hey @Nikolay, any update on this?
Nikolay
Telerik team
commented on 16 Feb 2024, 01:48 PM

Hi Akash,

The Charts Keyboard Support has been pushed with thaltest release. Here is the official demo:

Regarding the series pattern fills it is still unplanned. 

Regards,

Nikolay

No answers yet. Maybe you can help?

Tags
Accessibility Charts
Asked by
Akash
Top achievements
Rank 1
Iron
Share this question
or