Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.
ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML. The role attribute defines what the general type of object is (such as an article, alert, or slider). Additional ARIA attributes provide other useful properties, such as a description for a form or the current value of a progress bar.
ARIA is implemented in most popular browsers and screen readers. However, implementations vary and older technologies don't support it well (if at all). Use either "safe" ARIA that degrades gracefully, or ask users to upgrade to newer technology.
Rules of using ARIA
-
f you can use a native HTML element HTML51 or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
-
Do not change native semantics, unless you really have to.
-
All interactive ARIA controls must be usable with the keyboard.
-
Do not use role="presentation" or aria-hidden="true" on a visible focusable element .
Using either of these on a visible focusable element will result in some users focusing on 'nothing'.
-
All interactive elements must have an accessible name.
- Here is an example of the markup used for an HTML5 progress bar
\<!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>
- ... 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();
- [WebAIM] (http://webaim.org/)
- [Mac - Xcode Accessibility Inspector] (https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
- [WAVE Accessibility Tool] (http://wave.webaim.org/)
- [WAVE Chrome Extension] (http://wave.webaim.org/extension/)
- [Tota11y - an accessibility visualization toolkit from Khan Academy] (https://khan.github.io/tota11y/)