ARIA is a set of attributes that can be added to HTML elements (and other markup languages) to communicate accessibility role, state, name and properties which are exposed by browsers via platform accessibility APIs. This provides a common, interoperable method of relaying the information to assistive technologies. That’s it. It is the same method used by browsers to convey the inbuilt (or default) accessibility information of native HTML features. The difference being that authors can wire up this information for themselves in the DOM using ARIA, before they could not.
A simple example of what ARIA does and does not do:
ARIA does not magically make any element act differently to what it is, it only provides a method to make it appear as something else to assistive technology users. For example, in the sample code below, the ARIA role attribute makes the <div>
appear as a link
to assistive technology. Developers must provide the substance to the semantics conveyed using ARIA, otherwise users are confronted with a UI masquerade.
<div role="link">poot</div>
versus
<a href="...">poot</a>
feature | role=”link” | <a href=”…”> |
---|---|---|
conveys role to accessibility API | ||
conveys accessible name to accessibility API | ||
keyboard support (focus) | ||
keyboard support (operation) | ||
element specific context menu | ||
default visual semantics (e.g. underlining) |