Accessibility in Blazor Range Slider Component
4 Nov 20254 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 follows the WAI-ARIA pattern to meet accessibility requirements. The following ARIA attributes are used in the Range Slider component:
| Attributes | Purpose |
|---|---|
aria-valuenow |
Indicates the current value of the slider. |
aria-valuetext |
Provides a human-readable text alternative for the current value. |
aria-valuemin |
Indicates the minimum value of the slider. |
aria-valuemax |
Indicates the maximum value of the slider. |
aria-orientation |
Indicates the slider orientation. |
aria-label |
Defines an accessible name for controls (for example, increment or decrement). |
aria-labelledby |
References the element that provides the accessible name for the slider. |
Keyboard interaction
Keyboard interaction of the Blazor Range Slider component is based on the WAI-ARIA Practices described for sliders. Use the following shortcut keys to interact with the slider.
| Windows | Mac | Actions |
|---|---|---|
| ↑ or → | ↑ or → | Increase the slider value. |
| ↓ or ← | ↓ or ← | Decrease the slider value. |
| Home | Home | 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). |
| End | End | 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). |
| Page Up | Page Up | Increase by the LargeStep value. |
| Page Down | Page Down | Decrease by the LargeStep value. |
Ensuring accessibility
The Blazor Range Slider component’s accessibility is validated using the axe-core tool during automated testing.
The accessibility compliance of the Range Slider component is demonstrated in the following sample. Open the sample in a new window to evaluate the Range Slider component with accessibility tools.