This article explains aria-valuemin and aria-valuemax in plain language. It shows how assistive technology can understand the boundaries of a range control.
1. Starting with aria-valuenow
In a previous article on aria-valuenow, we looked at how aria-valuenow communicates the current numeric value of a custom slider to assistive technology.
For example:
<div
role="slider"
aria-label="Volume"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="40"
tabindex="0"
>
</div>Here, aria-valuenow="40" tells assistive technology:
"The current value of this slider is 40."
But a current value makes more sense when we also know the boundaries of the range.
In this example:
- the range starts at 0
- the current value is 40
- the range ends at 100
2. The aria-valuemin and aria-valuemax attributes
aria-valuemin communicates the lowest possible value of the range.
aria-valuemin="0"aria-valuemax communicates the highest possible value of the range.
aria-valuemax="100"Together with aria-valuenow, they provide the context for the current value:
aria-valuemin="0"
aria-valuenow="40"
aria-valuemax="100"You can think of it like this:
"This slider goes from 0 to 100, and its current value is 40."
3. Are these values announced?
When a screen reader user moves to a slider, the screen reader will usually announce information such as the slider's name, role and current value.
For example:
"Volume, slider, 40."
The minimum and maximum values may not be announced every time the slider is encountered.
However, aria-valuemin and aria-valuemax make the boundaries of the range available to assistive technology. This allows assistive technology to understand the size of the range and, where appropriate, communicate that information to the user.
So these attributes are still important even if the user does not hear:
"Minimum 0, maximum 100."
every time they interact with the control.
4. Minimum and maximum usually stay the same
There is an important difference between these attributes.
aria-valuenow is normally dynamic. As the user moves the slider, its value changes.
For example:
aria-valuemin="0"
aria-valuenow="40"
aria-valuemax="100"If the user moves the slider one step forward:
aria-valuemin="0"
aria-valuenow="41"
aria-valuemax="100"Only aria-valuenow has changed.
aria-valuemin and aria-valuemax usually stay the same because they define the boundaries of the range.
These values can be changed dynamically if the valid range changes. Only change them when there is a clear reason, as this may affect how users understand the control.
5. Negative and decimal values?
The minimum and maximum do not have to start at zero or use positive numbers.
For example, a temperature control might use a range from -20 to 40:
aria-valuemin="-20"
aria-valuenow="5"
aria-valuemax="40"This tells assistive technology that:
- the lowest possible value is -20
- the current value is 5
- the highest possible value is 40
The values can also contain decimal numbers.
For example:
aria-valuemin="0"
aria-valuenow="0.5"
aria-valuemax="1"The important thing is that the values accurately describe the numeric range used by the control.
6. ARIA does not enforce the range
aria-valuemin and aria-valuemax do not stop a custom slider from moving outside its range.
They communicate the boundaries of the range to assistive technology.
The developer still needs JavaScript to make sure the control behaves correctly and does not allow values below the minimum or above the maximum.
For example, if the slider is defined as:
aria-valuemin="0"
aria-valuemax="100"JavaScript should prevent the slider from moving to values such as -1 or 101.
Takeaway
aria-valuemin and aria-valuemax communicate the lowest and highest values of a range control.
They usually stay the same while aria-valuenow changes as the user moves within that range.