WAI-ARIA stands forWeb Accessibility Initiative-Accessible Rich Internet Applications that help web applications and web pages to be made more accessible. The basic idea of WAI-ARIA is that it adds symantic meaning to elements on the page that can be read by a screen reader to let a user who is visually impaired have context for what is happening on a page. This sort of text has been supported by the alt attribute on <img> tags and the title attribute on <hr> tags.
The most common attribute in WAI-ARIA is the role attribute. This provides context for elements. WAI-ARIA assigns roles to elements, and gives those roles properties and states.
<li role="menuitemcheckbox" aria-checked="true">Sort by Date</li>
The application might be using the list item as a linked element to sort content, yet without the role and aria-checked attributes, a screen reader would have no way to determine what this element is for. Semantics alone (in this case, a list item) tells it nothing. By adding these attributes, the assistive device is better able to understand what this function is for.
In HTML, tags such as <span> and <li> are used for many different things, from navigation to actual lists. By adding a role attribute, you can help the screen reader make sense of all of this.
<!DOCTYPE html>
<html>
<head>
<title>Meter</title>
</head>
<body>
<ul id="tree1" role="tree" tabindex="0" aria-labelledby="label_1">
<li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li>
<li role="group">
<ul>
<li role="treeitem" tabindex="-1">Oranges</li>
<li role="treeitem" tabindex="-1">Pineapples</li>
...
</ul>
</li>
</ul>
</body>
</html>When native semantics for a given feature become available, it is appropriate for authors to use the native feature and stop using WAI-ARIA for that feature. So something like HTML5 <nav> shouldn’t need ARIA role=navigation added to it, because it should have that built-in.
WAI-ARIA defines several roles that tell assistive technology about landmarks and structure of a document. Some of these are.
Some of these obviously match HTML5 elements, such as <article>, <form>, <heading>, and <nav>. Others do not have such one-to-one correspondence. For example, role=banner "typically includes things such as the logo or identity of the site sponsor, and site-specific search tool. A banner usually appears at the top of the page and typically spans the full width." That initially seems to match HTML5 <header>, but as you’ve seen, there can be multiple <header>s on a page. So the "page header" is the only one allowed to have role=banner.
Similarly, contentinfo is defined as "A large perceivable region that contains information about the parent document. Examples of information included in this region of the page are copyrights and links to privacy statements." This sounds like <footer>, but only the "page footer" and not each footer in a page with multiple footers.
role=main defines the "main content area" of a page. You can even use it as a hook for CSS in browsers that understand attribute selectors.
div[role=main] {
color:red;
background-color:yellow;
font-family: "Comic Sans MS", cursive;
}There you have accessibility and gorgeous typography in perfect harmony.
