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
Copy file name to clipboardExpand all lines: blazor/range-slider/accessibility.md
+23-23Lines changed: 23 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,8 +17,8 @@ The accessibility compliance for the Blazor Range Slider component is outlined b
17
17
18
18
| Accessibility Criteria | Compatibility |
19
19
| -- | -- |
20
-
|[WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | <imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> |
21
-
|[Section 508](https://www.section508.gov/) Support | <imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> |
20
+
|[WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | <imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Full support"> |
21
+
|[Section 508](https://www.section508.gov/) Support | <imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Full support"> |
22
22
| Screen Reader Support | <imgsrc="https://cdn.syncfusion.com/content/images/landing-page/yes.png"alt="Yes"> |
23
23
| Right-To-Left Support | <imgsrc="https://cdn.syncfusion.com/content/images/landing-page/yes.png"alt="Yes"> |
24
24
| Color Contrast | <imgsrc="https://cdn.syncfusion.com/content/images/landing-page/yes.png"alt="Yes"> |
@@ -33,45 +33,45 @@ The accessibility compliance for the Blazor Range Slider component is outlined b
33
33
}
34
34
</style>
35
35
36
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/landing-page/yes.png"alt="Yes"> - All features of the component meet the requirement.</div>
36
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/landing-page/yes.png"alt="Full support"> - All features of the component meet the requirement.</div>
37
37
38
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Partial"> - Some features of the component do not meet the requirement.</div>
38
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Partial support"> - Some features of the component do not meet the requirement.</div>
39
39
40
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/landing-page/no.png"alt="No"> - The component does not meet the requirement.</div>
40
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/landing-page/no.png"alt="Not supported"> - The component does not meet the requirement.</div>
41
41
42
42
## WAI-ARIA attributes
43
43
44
-
The Blazor Range Slider component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/slider/)patterns to meet the accessibility. The following ARIA attributes are used in the Range Slider component:
44
+
The Blazor Range Slider component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/slider/)pattern to meet accessibility requirements. The following ARIA attributes are used in the Range Slider component:
45
45
46
46
|**Attributes**|**Purpose**|
47
47
| --- | --- |
48
-
|`aria-valuenow`|It indicates the current value of the slider. |
49
-
|`aria-valuetext`|It returns the current text of the slider. |
50
-
|`aria-valuemin`|It indicates the minimum value of the slider. |
51
-
|`aria-valuemax`|It indicates the maximum value of the slider. |
52
-
|`aria-orientation`|It indicates the Slider Orientation. |
53
-
|`aria-label`|Slider left and right button label text (increment and decrement). |
54
-
|`aria-labelledby`|It indicates the name of the Slider. |
48
+
|`aria-valuenow`|Indicates the current value of the slider. |
49
+
|`aria-valuetext`|Provides a human-readable text alternative for the current value. |
50
+
|`aria-valuemin`|Indicates the minimum value of the slider. |
51
+
|`aria-valuemax`|Indicates the maximum value of the slider. |
52
+
|`aria-orientation`|Indicates the slider orientation. |
53
+
|`aria-label`|Defines an accessible name for controls (for example, increment or decrement). |
54
+
|`aria-labelledby`|References the element that provides the accessible name for the slider. |
55
55
56
56
## Keyboard interaction
57
57
58
-
The Keyboard interaction of the Blazor Range Slider component is designed based on the [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#slider) described for Slider. Users can use the following shortcut keys to interact with the Slider.
58
+
Keyboard interaction of the Blazor Range Slider component is based on the [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#slider) described for sliders. Use the following shortcut keys to interact with the slider.
59
59
60
60
| Windows | Mac | Actions |
61
61
| --- | --- | --- |
62
-
| <kbd>↑</kbd> or <kbd>→</kbd> | <kbd>↑</kbd> or <kbd>→</kbd> | Increase the Slider value.|
63
-
| <kbd>↓</kbd> , <kbd>←</kbd> | <kbd>↓</kbd> or <kbd>←</kbd> | Decrease the Slider value. |
64
-
| <kbd>Home</kbd> | <kbd>Home</kbd> |Moves to the start value (for Range Slider when the second thumb is focused and the Home key is pressed, it moves to the first thumb value). |
65
-
| <kbd>End</kbd> | <kbd>End</kbd> |Moves to the end value (for Range Slider when the first thumb is focused and the End key is pressed, it moves to the second thumb value). |
| <kbd>↑</kbd> or <kbd>→</kbd> | <kbd>↑</kbd> or <kbd>→</kbd> | Increase the slider value.|
63
+
| <kbd>↓</kbd> or <kbd>←</kbd> | <kbd>↓</kbd> or <kbd>←</kbd> | Decrease the slider value. |
64
+
| <kbd>Home</kbd> | <kbd>Home</kbd> |Move to the start value (for range sliders, when the second thumb is focused and Home is pressed, it moves to the first thumb’s value). |
65
+
| <kbd>End</kbd> | <kbd>End</kbd> |Move to the end value (for range sliders, when the first thumb is focused and End is pressed, it moves to the second thumb’s value). |
The Blazor Range Slider component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
71
+
The Blazor Range Slider component’s accessibility is validated using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) tool during automated testing.
72
72
73
-
The accessibility compliance of the Range Slider component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/slider) in a new window to evaluate the accessibility of the Range Slider component with accessibility tools.
73
+
The accessibility compliance of the Range Slider component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/slider) in a new window to evaluate the Range Slider component with accessibility tools.
74
74
75
75
## See also
76
76
77
-
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
77
+
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
Copy file name to clipboardExpand all lines: blazor/range-slider/format.md
+8-9Lines changed: 8 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,11 +9,10 @@ documentation: ug
9
9
10
10
# Formatting in Blazor Range Slider Component
11
11
12
-
The [`Format`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_Format) feature used to customize the units of Slider values to desired format. The formatted values will also be applied to the ARIA attributes of the slider. There are two ways of achieving formatting in slider.
12
+
The [`Format`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_Format) feature is used to customize the units and appearance of slider values. Formatted values are also applied to the ARIA attributes of the slider to ensure accessible output. There are two ways to apply formatting in the slider.
13
13
14
-
* Use the `Format` API of slider which utilizes our **Internationalization** to format values.
15
-
16
-
* Customize using the events namely [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange).
14
+
* Use the `Format` API of the slider, which leverages the built-in internationalization and .NET standard format strings.
15
+
* Customize formatting using the [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange) events.
17
16
18
17
```cshtml
19
18
@using Syncfusion.Blazor.Inputs
@@ -28,11 +27,11 @@ The [`Format`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.Sl
28
27
}
29
28
```
30
29
31
-
30
+
32
31
33
32
## Using format API
34
33
35
-
Slider provides different predefined formatting styles like Numeric (N), Percentage (P), Currency (C) and # specifiers.
34
+
Slider provides predefined formatting styles such as Numeric (`N`), Percentage (`P`), Currency (`C`), and custom numeric format strings (for example, `#`). These formats are culture-aware and use the application’s current culture for symbols and separators.
36
35
37
36
```cshtml
38
37
@using Syncfusion.Blazor.Inputs
@@ -48,11 +47,11 @@ Slider provides different predefined formatting styles like Numeric (N), Percent
48
47
49
48
```
50
49
51
-
50
+
52
51
53
52
## Using Events
54
53
55
-
For custom formatting use event handlers like [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange). Below is an example where slider values are formatted into weekdays and corresponding tooltip values are formatted as days of the week.
54
+
For custom scenarios, use event handlers like [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange). The following example formats tick labels as weekday names and tooltips as day numbers.
56
55
57
56
```cshtml
58
57
@using Syncfusion.Blazor.Inputs
@@ -82,4 +81,4 @@ For custom formatting use event handlers like [`TicksRendering`](https://help.sy
82
81
83
82
```
84
83
85
-
84
+
0 commit comments