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.
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
… and 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
- range
- scrollbar
- separator
- slider
- spinbutton
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>
Leave a Reply