Skip to content

Commit 247f474

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent c3f2a49 commit 247f474

File tree

2 files changed

+91
-0
lines changed

2 files changed

+91
-0
lines changed

‎docs-aspnet/html-helpers/charts/accessibility/key-nav.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: Telerik UI Charts for {{ site.framework }} Documentation - Keyboard Navigation
4+
description: "Get started with the Telerik UI Chart component and learn about the accessibility support it provides through its keyboard navigation functionality."
5+
slug: keynav_aspnetcore_charts
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The Chart comes with keyboard navigation enabled out of the box. The main interactive parts of the Chart are reachable through the keyboard - the Chart area and Legend area.
12+
13+
For a runnable example, refer to the [demo on using the keyboard navigation of the Charts](https://demos.telerik.com/{{ site.platform }}/charts/keyboard_navigation).
14+
15+
## Basic Concepts
16+
17+
Once the element receives focus, there will be two main focusable areas the user can be in - the main chart area and the legend (if one is present). Moving focus between the chart area and legend area is done with the `Tab` and `Shift` & `Tab` keys. Once focus is in one of the two areas, the user can navigate through the items using the arrow keys.
18+
19+
> The only focusable element of the Chart is the main wrapper element itself. Focusing individual points or legend items is implemented through the `aria-activedescendant` attribute. This works in the same way for both `SVG` and `Canvas` render modes.
20+
21+
## Available Shortcuts
22+
23+
When the chart area is focused, the following keyboard commands are available:
24+
25+
| SHORTCUT | DESCRIPTION
26+
|:--- |:---
27+
| `Right Arrow` | Moves focus to the next point in the series. If focus is on the last point of the series, moves focus to the first point of the next series.
28+
| `Left Arrow` | Moves focus to the previous point in the series. If focus is on the first point of the series, moves focus to the last point of the previous series.
29+
| `Down Arrow` | Moves focus to the next series.
30+
| `Up Arrow` | Moves focus to the previous series.
31+
| `Tab` | Moves the focus to the legend area. If the legend is not visible, or if legend position is `top` or `left`, moves focus to the next focusable element on the page.
32+
| `Shift` & `Tab` | Moves the focus to the previous focusable element on the page. If legend position is `top` or `left`, moves focus to the legend area.
33+
34+
When the legend area is focused, the following keyboard commands are available:
35+
36+
| SHORTCUT | DESCRIPTION
37+
|:--- |:---
38+
| `Right Arrow` | Moves focus to the next legend item. If we're already at the last item, focus cycles to the first item.
39+
| `Left Arrow` | Moves focus to the previous legend item. If we're already at the first item, focus cycles to the last item.
40+
| `Down Arrow` | Moves focus to the next legend item. If we're already at the last item, focus cycles to the first item.
41+
| `Up Arrow` | Moves focus to the previous legend item. If we're already at the first item, focus cycles to the last item.
42+
| `Tab` | Moves the focus to the next focusable element on the page. If the legend position is `top` or `left`, moves focus to the chart area.
43+
| `Shift` & `Tab` | Moves the focus to the chart area. If the legend position is `top` or `left`, moves focus to the previous focusable element on the page.
44+
45+
## See Also
46+
47+
* [Keyboard Navigation by the Chart (Demo)](https://demos.telerik.com/{{ site.platform }}/charts/keyboard_navigation)
48+
* [Accessibility in the Chart]({% slug accessibility_aspnetcore_charts %})

‎docs-aspnet/html-helpers/charts/accessibility/overview.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
title: Overview
3+
page_title: Telerik UI Charts for {{ site.framework }} Documentation - Charts Accessibility
4+
description: "Get started with the Telerik UI Chart component for {{ site.framework }} and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
slug: accessibility_aspnetcore_charts
6+
position: 1
7+
---
8+
9+
# Chart Accessibility
10+
11+
The Chart is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
12+
13+
For more information, refer to:
14+
* [Keyboard navigation by the Telerik UI Charts for {{ site.framework }}]({% slug keynav_aspnetcore_charts %})
15+
* [Accessibility in Telerik UI for {{ site.framework }}]({% slug overview_accessibility %})
16+
17+
## WAI-ARIA
18+
19+
The component follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers. For more information, refer to the article on [Accessibility Compliance Table in Telerik UI for {{ site.framework }}]({% slug compliance_accessibility %}).
20+
21+
## Section 508
22+
23+
The Chart is compliant with the Section 508 requirements. For more information, refer to the article on [Accessibility Compliance Table in Telerik UI for {{ site.framework }}]({% slug compliance_accessibility %}).
24+
25+
## WCAG 2.2
26+
27+
The Chart supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG/).
28+
29+
Meeting some of the Success Criteria in WCAG 2.2 may require additional customization:
30+
* ***1.4.3** Contrast (Minimum)*
31+
32+
The color of chart elements may need to be customized to meet the minimum required contrast level. Some Theme Swatches like the Ocean Blue A11y Accessibility Swatch meet and exceed this criteria.
33+
* ***2.5.8:** Target Size (Minimum)*
34+
35+
The size of Series Markers and the font size of Legend Items may need to be customized to meet the minimum size of 24x24px required by this criteria.
36+
37+
38+
## See Also
39+
40+
* [WCAG 2.2 Support by the Chart (Demo)](https://demos.telerik.com/{{ site.platform }}/charts/index)
41+
* [Keyboard Navigation by the Chart (Demo)](https://demos.telerik.com/{{ site.platform }}/charts/keyboard_navigation)
42+
* [Keyboard Navigation by the Chart]({% slug keynav_aspnetcore_charts %})
43+
* [Accessibility in Telerik UI for {{ site.framework }}]({% slug overview_accessibility %})

0 commit comments

Comments
 (0)