Value in range

Rule ID Widget 10
Definition Range widget must have value between minimum and maximum values, or have an indeterminate state.
  • 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.
  • HTML4 Legacy Techniques (Required)
  • HTML5 and ARIA Techniques (Required)
WCAG Success Criteria

4.1.2 Name, Role, Value (Level A, Primary Success Criterion)

Rule Category Widgets/Scripting
Scope Element
Target Resources Range widgets
  • 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