WAI-ARIA: aria-valuemin (Property)
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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 attributeprogressBar.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
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
