| Rule ID |
Widget 10 |
| Conformance |
Required |
| 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 typically render the value of a range widget as a percentage of the total range defined by the minimum and maximum values.
- Elements with the role
separator that are focusable (e.r. tabindex=0) are considered a range role with the same requirements as a scrollbar.
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.
|
| Conformance |
Required |
| WCAG Success Criteria |
Success Criterion 4.1.2 Name, Role, Value
Other Related Success Criterion:
|
| Rule Category |
ARIA Widgets |
| Rule Scope |
Element |
| Techniques |
- Use the numerical value of the
aria-valuenow attribute must be in the range defined by aria-valuemin and aria-valuemax.
- Screen readers typically render the range 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.
|
| Information Links |
|