WAI ARIA Cheatsheet

What is WAI-ARIA?

In practice, WAI-ARIA gives us more attributes to assign to elements. There are two kinds of attributes, the role attribute and the aria-.* attributes (“.*” meaning that what follows “aria-” is variable)

These new attributes seek to increase the semantics of our documents, facilitate the development of Rich Internet Applications and improve Accessibility

The aria-.* attributes and the values they can have gives us information about the state of an element, and are more geared toward Rich Application Development.

The role attribute and the values it can have gives us information about the purpose of an element in question (is it navigation? Main data? Or tangential content?). Assistive technologies can use this information to jump directly to the main content, immediately detect the main navigation of the document, etc.

This document focuses on the more common WAI-ARIA Landmark Roles, as you can see displayed in yellow. Also, just because you see them here does not mean that they all should be used, it all depends on the actual content of your page. Some Roles are suitable for more than what is shown here, e.g. complementary is suitable for sidebars and also other kind of contents, for more info on any given Role just click on them.

Why should I use WAI-ARIA Landmark Roles?

You will enrich the semantics of your documents and improve accessibility.

You will also have better “hooks” to target your elements, avoiding excessive use of id or class attributes. WAI-ARIA Role values can not be repeated, but HTML5 elements can (you can have several header or footer elements in a single page), so it is easier to make sure you are targeting your actual document header, instead of affecting every possible header element that may in the future be put on your document

Can I see some code?

Yeah, sure! :D here is a basic document skeleton with proper role attributes and values:

    
<!doctype html>
<html>
<head>
<title>Title of your document</title>
<meta charset="utf-8">
<meta name="description" content="description of your document">
</head>


<body>

<header role="banner">
  <h1>Title of your document</h1>
  <nav role="navigation">
    <ol>
      <li>
        <a href="#">alpha</a>
      </li>
      <li>
        <a href="#">bravo</a>
      </li>
      <li>
        <a href="#">charlie</a>
      </li>
      <li>
        <a href="#">delta</a>
      </li>
    </ol>
    <form role="search">
      <input type="search" placeholder="Need to find something?">
      <input type="submit" value="search">
    </form>
  </nav>
</header>

<main role="main">
  <h2>Main Content</h2>
  <p>Juicy content</p>
</main>

<aside role="complementary">
  <h2>Sidebar</h2>
  <p>Complementary content</p>
</aside>

<footer role="contentinfo">
  <h2>Footer</h2>
  <p>Information about the document</p>
</footer>

</body>
</html>


      <main role="main">