You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: Accessibility in Blazor 3D Chart Component | Syncfusion
4
-
description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor 3D Chart component and more.
4
+
description: Check out and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor 3D Chart component and more.
5
5
platform: Blazor
6
6
control: 3D Chart
7
7
documentation: ug
8
8
---
9
9
10
10
# Accessibility in Blazor 3D Chart Component
11
11
12
-
The Blazor 3D Chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
12
+
The Blazor 3D Chart component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI‑ARIA roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
13
13
14
-
The accessibility compliance for the Blazor 3D Chart component is outlined below.
14
+
The accessibility compliance for the Blazor 3D Chart component is outlined below.
15
15
16
16
| Accessibility Criteria | Compatibility |
17
17
| -- | -- |
@@ -33,23 +33,23 @@ The accessibility compliance for the Blazor 3D Chart component is outlined belo
33
33
34
34
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> - All features of the component meet the requirement.</div>
35
35
36
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
36
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Intermediate"> - Some features of the component do not fully meet the requirement.</div>
37
37
38
38
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="No"> - The component does not meet the requirement.</div>
39
39
40
40
## WAI-ARIA attributes
41
41
42
-
WAI-ARIA(Accessibility Initiative - Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with AJAX, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components.
42
+
WAI‑ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) enhances the accessibility of dynamic web content and UI components by defining semantic roles, states, and properties. ARIA attributes convey the role, state, and functionality of components to assistive technologies.
43
43
44
-
Element |Default description
44
+
Element |Default description
45
45
-----|-----
46
-
Datalabel |Reads the Point y value.
47
-
Legend |Click to show or hide the series.
48
-
Axis Title |Reads the axis title.
49
-
Chart Title |Reads the chart title.
50
-
Series Points |Reads the Point x: Point y value.
46
+
Datalabel |Reads the point y-value.
47
+
Legend |Click to show or hide the series.
48
+
Axis Title |Reads the axis title.
49
+
Chart Title |Reads the chart title.
50
+
Series Points |Reads the point x and point y values.
51
51
52
-
The Blazor 3D Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor 3D Chart component:
52
+
The Blazor 3D Chart component follows [WAI‑ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet accessibility requirements. The following ARIA roles and attributes are used in the Blazor 3D Chart component:
53
53
54
54
* img (role)
55
55
* button (role)
@@ -60,23 +60,23 @@ The Blazor 3D Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/ARI
60
60
61
61
## Keyboard navigation
62
62
63
-
The Blazor 3D Chart component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction)guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor 3D Chart component.
63
+
The Blazor 3D Chart component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction)guidelines, enabling efficient navigation for assistive technology users and full keyboard operation. The following keyboard shortcuts are supported.
64
64
65
65
| Windows | Mac | Description |
66
66
|-----|-----|---|
67
-
|<kbd>Alt</kbd> + <kbd>J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Moves the focus to the chart element.|
68
-
|<kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the focus to the next element in the chart.|
69
-
|<kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the focus to the previous element in the chart.|
70
-
| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves the focus to the data point right side from the selected point.|
71
-
| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves the focus to the data point right side from the selected point.|
72
-
| <kbd>←</kbd> | <kbd>←</kbd> | Moves the focus to the next series in our Chart component.|
73
-
| <kbd>→</kbd> | <kbd>→</kbd> | Moves the focus to the previous series in our Chart component.|
74
-
| <kbd>Enter</kbd> / <kbd>Space</kbd> | <kbd>Enter</kbd> / <kbd>Space</kbd> | Selects the data point in the series|
75
-
| <kbd>↓</kbd> / <kbd>←</kbd> | <kbd>↓</kbd> / <kbd>←</kbd> | Moves the focus to the legend left side from the selected legend.|
76
-
| <kbd>↑</kbd> / <kbd>→</kbd> | <kbd>↑</kbd> / <kbd>→</kbd> | Moves the focus to the legend right side from the selected legend.|
67
+
|<kbd>Alt</kbd> + <kbd>J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Moves focus to the chart element.|
68
+
|<kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves focus to the next element in the chart.|
69
+
|<kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves focus to the previous element in the chart.|
70
+
| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves focus to the data point on the left of the selected point.|
71
+
| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves focus to the data point on the right of the selected point.|
72
+
| <kbd>←</kbd> | <kbd>←</kbd> | Moves focus to the next series in the chart.|
73
+
| <kbd>→</kbd> | <kbd>→</kbd> | Moves focus to the previous series in the chart.|
74
+
| <kbd>Enter</kbd> / <kbd>Space</kbd> | <kbd>Enter</kbd> / <kbd>Space</kbd> | Selects the data point in the series.|
75
+
| <kbd>↓</kbd> / <kbd>←</kbd> | <kbd>↓</kbd> / <kbd>←</kbd> | Moves focus to the legend item to the left of the selected legend.|
76
+
| <kbd>↑</kbd> / <kbd>→</kbd> | <kbd>↑</kbd> / <kbd>→</kbd> | Moves focus to the legend item to the right of the selected legend.|
77
77
| <kbd>Enter</kbd> / <kbd>Space</kbd> | <kbd>Enter</kbd> / <kbd>Space</kbd> | Toggles the visibility of the corresponding series.|
78
-
| <kbd>Ctrl</kbd> + <kbd>P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the Chart.|
78
+
| <kbd>Ctrl</kbd> + <kbd>P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the chart.|
79
79
80
80
## See also
81
81
82
-
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
82
+
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
0 commit comments