Accessibility in Blazor Range Slider Component
21 Jun 20244 minutes to read
The Blazor Range Slider is characterized with complete WAI-ARIA Accessibility support that helps to access by on-screen readers and other assistive technology devices. This component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The Blazor Range Slider component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The accessibility compliance for the Blazor Range Slider component is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support |  |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Axe-core Accessibility Validation | |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
The Blazor Range Slider component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Range Slider component:
| Attributes | Purpose |
|---|---|
aria-valuenow |
It indicates the current value of the slider. |
aria-valuetext |
It returns the current text of the slider. |
aria-valuemin |
It indicates the minimum value of the slider. |
aria-valuemax |
It indicates the maximum value of the slider. |
aria-orientation |
It indicates the Slider Orientation. |
aria-label |
Slider left and right button label text (increment and decrement). |
aria-labelledby |
It indicates the name of the Slider. |
Keyboard interaction
The Keyboard interaction of the Blazor Range Slider component is designed based on the WAI-ARIA Practices described for Slider. Users can use the following shortcut keys to interact with the Slider.
| Keyboard shortcuts | Actions |
|---|---|
| Right Arrow Up Arrow | Increase the Slider value. |
| Left Arrow Down Arrow | Decrease the Slider value. |
| Home | 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). |
| End | 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). |
| Page Up | Increases the Slider by LargeStep value. |
| Page Down | Decreases the Slider by LargeStep value. |
Ensuring accessibility
The Blazor Range Slider component’s accessibility levels are ensured through an axe-core software tool during automated testing.
The accessibility compliance of the Range Slider component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Range Slider component with accessibility tools.