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 Sparkline Component | Syncfusion
4
-
description: Checkout and learn here all about Accessibility using Keyboard navigationin Syncfusion Blazor Sparkline component and more.
4
+
description: Learn about accessibility, keyboard navigation, and compliance in the Syncfusion Blazor Sparkline component.
5
5
platform: Blazor
6
6
control: Sparkline
7
7
documentation: ug
8
8
---
9
9
10
10
# Accessibility in Blazor Sparkline Component
11
11
12
-
The Blazor Sparkline 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 Sparkline 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 [WCAG roles](https://www.w3.org/TR/wai-aria/#roles).
13
13
14
-
The accessibility compliance for the Blazor Sparkline component is outlined below.
14
+
The table below outlines accessibility compliance for the Blazor Sparkline component.
15
15
16
16
| Accessibility Criteria | Compatibility |
17
17
| -- | -- |
@@ -21,7 +21,7 @@ The accessibility compliance for the Blazor Sparkline component is outlined belo
@@ -30,43 +30,43 @@ The accessibility compliance for the Blazor Sparkline component is outlined belo
30
30
margin: 0.5em0;
31
31
}
32
32
</style>
33
+
33
34
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> - All features of the component meet the requirement.</div>
34
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
37
37
38
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="No"> - The component does not meet the requirement.</div>
38
39
39
40
40
-
## WAI-ARIA attributes
41
+
## WAI-ARIA Attributes
41
42
42
-
The Blazor Sparkline 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 Sparkline component:
43
+
The component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns for accessibility. The following ARIA attributes are used:
43
44
44
45
* img (role)
45
46
* region (role)
46
47
* aria-label (attribute)
47
48
* aria-hidden (attribute)
48
49
* aria-pressed (attribute)
49
50
50
-
## Keyboard interaction
51
+
## Keyboard Interaction
51
52
52
-
The Blazor Sparkline 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 Sparkline component.
53
+
The component supports [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction)guidelines, making it accessible for users relying on assistive technologies (AT) or keyboard navigation. Supported keyboard shortcuts:
53
54
54
55
| Windows | Mac | Description |
55
56
| --- | --- | --- |
56
-
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the focus to the next element in the Sparkline. |
57
-
| <kbd>Shift + Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the focus to the previous element in the Sparkline. |
58
-
| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves the focus to the data point right side from the selected point. |
59
-
| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves the focus to the data point right side from the selected point. |
60
-
| <kbd>ESC</kbd> | <kbd>ESC</kbd> |Cancel the tooltip for the data point. |
57
+
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves focus to the next element in the Sparkline. |
58
+
| <kbd>Shift + Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves focus to the previous element in the Sparkline. |
59
+
| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves focus to the data point right side from the selected point. |
60
+
| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves focus to the data point right side from the selected point. |
61
+
| <kbd>ESC</kbd> | <kbd>ESC</kbd> |Cancels the tooltip for the data point. |
61
62
| <kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the Sparkline. |
62
63
63
-
## Ensuring accessibility
64
-
65
-
The Blazor Sparkline component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
64
+
## Ensuring Accessibility
66
65
67
-
The accessibility compliance of the Blazor Sparkline component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/sparkline) in a new window to evaluate the accessibility of the Blazor Sparkline component with accessibility tools.
66
+
Accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright)with Playwright tests.
68
67
68
+
Evaluate accessibility in the Blazor Sparkline component by opening the [sample](https://blazor.syncfusion.com/accessibility/sparkline) in a new window and using accessibility tools.
69
69
70
-
## See also
70
+
## See Also
71
71
72
-
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
72
+
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
title: Appearance in Blazor Sparkline Component | Syncfusion
4
-
description: Checkout and learn here all about appearance in Syncfusion Blazor Sparkline component and much more.
4
+
description: Check out and learn here all about appearance customization in the Syncfusion Blazor Sparkline component.
5
5
platform: Blazor
6
6
control: Sparkline Charts
7
7
documentation: ug
8
8
---
9
9
10
10
# Appearance in Blazor Sparkline Component
11
11
12
-
The rendering direction, padding, border, and the background appearance of the Sparkline can all be customized.
12
+
The rendering direction, padding, border, and background appearance of the Sparkline can be customized.
13
13
14
-
## Right-to-left (RTL)
14
+
## Right-to-Left (RTL)
15
15
16
-
The Sparkline supports the right-to-left (RTL) rendering that can be enabled by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_EnableRtl) property to **true**.
16
+
Right-to-left (RTL) rendering is supported and can be enabled by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_EnableRtl) property to **true**.
28
30
29
31
## Border
30
32
31
-
The border can be enabled and customized by specifying the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderSettings.html#Syncfusion_Blazor_Charts_BorderSettings_Color) and the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderSettings.html#Syncfusion_Blazor_Charts_BorderSettings_Width) properties of the[SparklineContainerAreaBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.SparklineContainerAreaBorder.html).
33
+
The border can be enabled and customized by specifying the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderSettings.html#Syncfusion_Blazor_Charts_BorderSettings_Color) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderSettings.html#Syncfusion_Blazor_Charts_BorderSettings_Width) properties of [SparklineContainerAreaBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.SparklineContainerAreaBorder.html).
44
48
45
49
## Padding
46
50
47
-
The Sparkline supports padding between the container and the component using the [SparklinePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklinePadding.html). The code example in the following shows the Sparkline Chart with overall padding set to 20.
51
+
Padding between the container and the component is supported using [SparklinePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklinePadding.html). The following example shows the Sparkline Chart with overall padding set to 20.
62
68
63
69
## Background
64
70
65
-
The background color of the Sparkline area can be changed using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineContainerArea.html#Syncfusion_Blazor_Charts_SparklineContainerArea_Background) property of the [SparklineContainerArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineContainerArea.html). By default, the Sparkline background color is **Transparent**.
71
+
The background color of the Sparkline area can be changed using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineContainerArea.html#Syncfusion_Blazor_Charts_SparklineContainerArea_Background) property of [SparklineContainerArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineContainerArea.html). By default, the background color is **Transparent**.
0 commit comments