WAI-ARIA: aria-valuemin (Property) • DigitalA11Y

What is aria-valuemin?

Defines the minimum allowed value for a range widget.

Description

Defines the minimum allowed value for a range widget.

Authors MUST ensure the value of aria-valuemin is less than or equal to the value of aria-valuemax. If the aria-valuenow has a known maximum and minimum, the author SHOULD provide properties for aria-valuemax and aria-valuemin.

Note: A range widget starts with a given value, which can be decreased until reaching the minimum value, defined by this property. Declaring the minimum and maximum values allows assistive technology to convey the size of the range to users.

Browser Compatibility For aria-valuemin

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
`ariaValueMin`	ChromeFull support81	EdgeFull support81	FirefoxNo supportNo	Internet ExplorerNo supportNo	OperaFull support68	SafariFull support12.1	WebView AndroidFull support81	Chrome AndroidFull support81	Firefox for AndroidNo supportNo	Opera AndroidFull support58	Safari on iOSFull support12.2	Samsung InternetFull support13.0

Example

HTML Example

<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />

JavaScript Example

Find the progress bar <div> in the DOM.
var progressBar = document.getElementById("percent-loaded");

Set its ARIA roles and states, so that assistive technologies know what kind of widget it is.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

Create a function that can be called at any time to update the value of the progress bar.
function updateProgress(percentComplete) {
progressBar.setAttribute("aria-valuenow", percentComplete);
}

HTML5 Example

<!DOCTYPE html>
<html>
<head><title>Gracefully degrading progress bar</title></head>
<body>
<progress id="progress-bar" value="0" max="100">0% complete</progress>
<button id="update-button">Update</button>
</body>
</html>

Supporting JavaScript

Here is the JavaScript code that will ensure the progress bar still works in older browsers:

var progressBar = document.getElementById("progress-bar");

Check to see if the browser supports the HTML5 <progress> tag.
var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined");
function setupProgress() {
if (!supportsHTML5Progress) {
HTML5 <progress> isn't supported in this browser, so we need to add ARIA roles and states to the element.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);
}
}
function updateProgress(percentComplete) {
if (!supportsHTML5Progress) {
HTML5 <progress> isn't supported by this browser, so we need to update the aria-valuenow attribute
progressBar.setAttribute("aria-valuenow", percentComplete);
} else {
HTML5 <progress> is supported, so update the value attribute instead.
progressBar.setAttribute("value", percentComplete);
}
progressBar.textContent = percentComplete + "% complete";
}
function initDemo() {
setupProgress();
Setup the progress bar.
Bind a click handler to the button, which will update the progress bar to 75%.
document.getElementById("update-button").addEventListener("click", function (e) {
updateProgress(75);
e.preventDefault();
}, false);
}
initDemo();

Characteristics

Used in Roles

Inherits into Roles

progressbar

Value

number
- Any real numerical value.

Semantic HTML

Use the HTML5 min attribute.

<form action="/action_page.php">
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>

Reference

W3C (opens new window)
MDN Web Docs