« Back to home

Testing aria-valuemin and aria-valuemax

aria-valuemin and aria-valuemax define the lower and upper bounds of a range widget's value.

Example 1: Native <progress>

A native <progress> element has no min attribute at all, only value and max. Its minimum is always implicitly 0. This is a real, structural limitation, native <progress> cannot represent a range that doesn't start at zero.

Expected result: the value should be clamped between 0 (its only possible minimum) and 26.2. The decrease button should have no effect once the value reaches 0.

<progress id="native-progress" value="0" max="26.2">0 of 26.2 miles</progress>

Example 2: Custom slider with a non-zero range

This custom slider represents a temperature gauge from -20°C to 40°C, a range native <progress> cannot express, since it has no way to set a minimum other than 0. Use Arrow Up / Arrow Down to change the value by 1, Home to jump to the minimum, End to jump to the maximum, or the buttons below.

Expected result: the value should be clamped between -20 and 40. Attempting to go below -20 or above 40, by any method, arrow keys, Home/End, or the buttons, should have no further effect once the boundary is reached.

<div
  role="slider"
  aria-labelledby="temp-label"
  aria-valuemin="-20"
  aria-valuemax="40"
  aria-valuenow="22"
  tabindex="0"
>22°C</div>

Note for testing: confirm with your standard browser and screen reader combinations that aria-valuemin and aria-valuemax are announced (for example, as part of a percentage-through-range calculation, or read out directly), and that reaching either boundary is communicated clearly to the user.

« Back to home