Value in range

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.
Required Yes for HTML5 and ARIA Techniques ruleset mapping
WCAG Success Criteria

4.1.2 Name, Role, Value (Level A, Primary 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