|
1 | 1 | --- |
2 | 2 | layout: post |
3 | 3 | title: Accessibility in Blazor Smith Chart Component | Syncfusion |
4 | | -description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Smith Chart component and more. |
| 4 | +description: Check out and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Smith Chart component and more. |
5 | 5 | platform: Blazor |
6 | 6 | control: Smith Chart |
7 | 7 | documentation: ug |
8 | 8 | --- |
9 | 9 |
|
10 | 10 | # Accessibility in Blazor Smith Chart Component |
11 | 11 |
|
12 | | -The Blazor Smith 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 Smith Chart component is designed to meet major 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). These standards help ensure the component is usable by everyone, including people with disabilities. |
13 | 13 |
|
14 | | -The accessibility compliance for the Blazor Smith Chart component is outlined below. |
| 14 | +## Accessibility Compliance |
| 15 | + |
| 16 | +The table below summarizes the accessibility features supported by the Blazor Smith Chart component: |
15 | 17 |
|
16 | 18 | | Accessibility Criteria | Compatibility | |
17 | 19 | | -- | -- | |
18 | | -| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> | |
19 | | -| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> | |
20 | | -| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> | |
21 | | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> | |
22 | | -| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> | |
23 | | -| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> | |
24 | | -| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> | |
25 | | -| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> | |
| 20 | +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes" /> | |
| 21 | +| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes" /> | |
| 22 | +| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes" /> | |
| 23 | +| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes" /> | |
| 24 | +| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes" /> | |
| 25 | +| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes" /> | |
| 26 | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes" /> | |
| 27 | +| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes" /> | |
26 | 28 |
|
27 | 29 | <style> |
28 | 30 | .post .post-content img { |
29 | 31 | display: inline-block; |
30 | 32 | margin: 0.5em 0; |
31 | 33 | } |
32 | 34 | </style> |
| 35 | + |
33 | 36 | <div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div> |
34 | 37 |
|
35 | 38 | <div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div> |
36 | 39 |
|
37 | 40 | <div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div> |
38 | 41 |
|
39 | 42 |
|
40 | | -## WAI-ARIA attributes |
| 43 | +## WAI-ARIA Attributes |
41 | 44 |
|
42 | | -The Blazor Smith 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 Smith Chart component: |
| 45 | +The Blazor Smith Chart component implements [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to enhance accessibility. The following ARIA roles and attributes are used: |
43 | 46 |
|
44 | | -* img (role) |
45 | | -* button (role) |
46 | | -* region (role) |
47 | | -* aria-label (attribute) |
48 | | -* aria-hidden (attribute) |
49 | | -* aria-pressed (attribute) |
| 47 | +- `img` (role) |
| 48 | +- `button` (role) |
| 49 | +- `region` (role) |
| 50 | +- `aria-label` (attribute) |
| 51 | +- `aria-hidden` (attribute) |
| 52 | +- `aria-pressed` (attribute) |
50 | 53 |
|
51 | | -## Keyboard interaction |
| 54 | +## Keyboard Interaction |
52 | 55 |
|
53 | | -The Blazor Smith 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 Smith Chart component. |
| 56 | +The component supports [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, making it accessible for users who rely on assistive technologies or keyboard navigation. The following keyboard shortcuts are available: |
54 | 57 |
|
55 | 58 | | Windows | Mac | Description | |
56 | 59 | | --- | --- | --- | |
57 | | -| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the focus to the next element in the Smith Chart. | |
58 | | -| <kbd>Shift + Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the focus to the previous element in the Smith Chart. | |
59 | | -| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves the focus to the data point right side from the selected point. | |
60 | | -| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves the focus to the data point right side from the selected point. | |
61 | | -| <kbd>←</kbd> | <kbd>←</kbd> | Moves the focus to the next series in our Smith Chart component. | |
62 | | -| <kbd>→</kbd> | <kbd>→</kbd> | Moves the focus to the previous series in our Smith Chart component. | |
63 | | -| <kbd>↓</kbd> or <kbd>←</kbd> | <kbd>↓</kbd> or <kbd>←</kbd> | Moves the focus to the legend left side from the selected legend. | |
64 | | -| <kbd>↑</kbd> or <kbd>→</kbd> | <kbd>↑</kbd> or <kbd>→</kbd> | Moves the focus to the legend right side from the selected legend. | |
65 | | -| <kbd>Enter</kbd> or <kbd>Space</kbd> | <kbd>Enter</kbd> or <kbd>Space</kbd> | Toggles the visibility of the corresponding series. | |
66 | | -| <kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the Smith Chart. | |
| 60 | +| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Move focus to the next element in the Smith Chart. | |
| 61 | +| <kbd>Shift + Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Move focus to the previous element in the Smith Chart. | |
| 62 | +| <kbd>↓</kbd> | <kbd>↓</kbd> | Move focus to the data point to the left of the selected point. | |
| 63 | +| <kbd>↑</kbd> | <kbd>↑</kbd> | Move focus to the data point to the right of the selected point. | |
| 64 | +| <kbd>←</kbd> | <kbd>←</kbd> | Move focus to the next series in the Smith Chart. | |
| 65 | +| <kbd>→</kbd> | <kbd>→</kbd> | Move focus to the previous series in the Smith Chart. | |
| 66 | +| <kbd>↓</kbd> or <kbd>←</kbd> | <kbd>↓</kbd> or <kbd>←</kbd> | Move focus to the legend to the left of the selected legend. | |
| 67 | +| <kbd>↑</kbd> or <kbd>→</kbd> | <kbd>↑</kbd> or <kbd>→</kbd> | Move focus to the legend to the right of the selected legend. | |
| 68 | +| <kbd>Enter</kbd> or <kbd>Space</kbd> | <kbd>Enter</kbd> or <kbd>Space</kbd> | Toggle the visibility of the corresponding series. | |
| 69 | +| <kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Print the Smith Chart. | |
67 | 70 |
|
68 | | -## Ensuring accessibility |
| 71 | +## Ensuring Accessibility |
69 | 72 |
|
70 | | -The Blazor Smith Chart component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. |
| 73 | +Accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. |
71 | 74 |
|
72 | | -The accessibility compliance of the Blazor Smith Chart component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/smith-chart) in a new window to evaluate the accessibility of the Blazor Smith Chart component with accessibility tools. |
| 75 | +You can evaluate the accessibility of the Blazor Smith Chart component using this [sample](https://blazor.syncfusion.com/accessibility/smith-chart) in a new window with accessibility tools. |
73 | 76 |
|
74 | | -## See also |
| 77 | +## See Also |
75 | 78 |
|
76 | | -* [Accessibility in Syncfusion<sup style="font-size:70%">®</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) |
| 79 | +- [Accessibility in Syncfusion<sup style="font-size:70%">®</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) |
0 commit comments