The HTML aria-valuemin attribute
The aria-valuemin attribute sets the minimum value of a custom range widget. Put it on elements such as role="slider" or role="spinbutton", together with aria-valuenow and aria-valuemax. On native range inputs, use the HTML min attribute instead.
Overview
The aria-valuemin attribute defines the lowest value a custom range widget can take. Assistive technology uses it with aria-valuenow and aria-valuemax to describe where the current value sits. It takes any number, and WAI-ARIA requires it to be less than or equal to aria-valuemax.
It is supported on the slider, spinbutton, scrollbar, progressbar and meter roles, and on a focusable separator. When it's missing, all of those roles except one assume 0. A spinbutton has no minimum by default, so set aria-valuemin whenever a spin button has a lower limit.
For a progressbar or scrollbar, WAI-ARIA says assistive technology should present the value as a percentage of the range between aria-valuemin and aria-valuemax. A progress bar with a minimum of 50 and a maximum of 150 at a value of 100 is therefore halfway.
Native controls don't need it. ARIA in HTML says authors should not put aria-valuemin on <input type="range"> or <meter>, and must not use it on any element that already has a min attribute. Use the HTML min attribute there instead.
Syntax
<div role="slider" tabindex="0" aria-label="Volume" aria-valuemin="0" aria-valuemax="10" aria-valuenow="4"></div>Values
| Value |
|---|
| A number. |
Example
<p><span id="guests-label">Guests</span> (focus the box, then press Up, Down, Home or End)</p>
<div id="guests" style="display: inline-block; min-width: 3em; padding: 6px 10px; border: 1px solid #767676;" role="spinbutton" tabindex="0" aria-labelledby="guests-label" aria-valuemin="1" aria-valuemax="8" aria-valuenow="2">2</div>
<script>
const g = document.getElementById('guests');
g.addEventListener('keydown', function (e) {
const min = Number(g.getAttribute('aria-valuemin'));
const max = Number(g.getAttribute('aria-valuemax'));
let v = Number(g.getAttribute('aria-valuenow'));
if (e.key === 'ArrowUp') v = Math.min(max, v + 1);
else if (e.key === 'ArrowDown') v = Math.max(min, v - 1);
else if (e.key === 'Home') v = min;
else if (e.key === 'End') v = max;
else return;
e.preventDefault();
g.setAttribute('aria-valuenow', v);
g.textContent = v;
});
</script>Best practices
- Set
aria-valuemin,aria-valuemaxandaria-valuenowtogether on every custom range widget. - Always set
aria-valueminon a spinbutton that has a lower limit, since spinbuttons have no default minimum. - Clamp values in your key handlers so
aria-valuenownever drops belowaria-valuemin. - Make the Home key jump to the minimum, as the WAI-ARIA Authoring Practices slider and spinbutton patterns describe.
- Use the native
minattribute on<input type="range">and<meter>instead.
Frequently asked questions
What does aria-valuemin do?
What does aria-valuemin default to when it is missing?
Do I need aria-valuemin on input type=range?
input type=range exposes its min attribute to assistive technology already. ARIA in HTML says not to add aria-valuemin there, and never on an element that has a min attribute.
