| Rule ID |
Widget 10 |
| Definition |
Range widget must have value between minimum and maximum values, or have an indeterminate state. |
| Purpose |
- Range roles identify a value between a minimum or maximum value and whether the value can be changed by the user (e.g.
scrollbar, slider or spinbutton).
- Screen readers typcially render the value of a range widget as a percentage of the total range defined by the minimum and maximum values.
aria-valuetext can be used to render an alternative to the percentage when a numerical values and/or a units of measure are more descriptive.- Some range roles (e.g.
progress and spinbutton) allow an unknown current value indicating indeterminate or no current value.
|
| Mappings |
-
HTML4 Legacy Techniques
(Required)
-
HTML5 and ARIA Techniques
(Required)
|
| WCAG Success Criteria |
4.1.2 Name, Role, Value (Level A, Primary Success Criterion)
Other Related Success Criterion:
|
| Rule Category |
Widgets/Scripting |
| Scope |
Element |
| Target Resources |
Range widgets
|
| Techniques |
- Use the
aria-valuenow attributes numerical value must be in the range defined by aria-valuemin and aria-valuemax.
- Screen reader typically render the slider value as a percentage, requiring a valid
aria-valuenow attribute.
- Use the
aria-valuetext to provide an alternative to the percentage typically spoken by assistive technologies (e.g. "32 dollars", "78 degrees")
- For most range roles, if
aria-valuemin is not defined it's default value is 0.
- For most range roles, if
aria-valuemax is not defined it's default value is 100.
|
| Informational Links |
|