One of Many Reasons WAI-ARIA Is Awesome...More Semantics

Accessible Rich Internet Applications (WAI-ARIA) is now a W3C recommendation, so it's important web developers start to understand what it is and how to use it. Also, there's something awesome about WAI-ARIA. Not only does it benefit people using your site, it benefits you as a developer—it provides you with an arsenal of semantic attributes you can target in your CSS and javascript.

WAI-ARIA in a Nutshell

Assistive technologies rely on and take advantage of HTML built using semantic elements appropriate for the content, like nav, header, main, button, ul, and dl—they provide people dependent on assistive technologies the best possible experience. However, even the best markup can't always adequately describe the content and/or its state on a web page. WAI-ARIA allows you to add more meaning to existing HTML markup with roles and their supporting states and properties—there are over 100 combined, including:

• tree
• banner
• group
• aria-live
• aria-expanded

Your HTML Markup Just Got More Meaningful

Consider the HTML markup for a tree made of nested lists and toggle controls. The markup would look something like this (if you already know something about ARIA, pretend you don't):

<ul class="tree">
  <li class="tree-item parent collapsed">
    <ul class="sub-tree">
      item 1
      <li class="tree-item">item 1 child 1</li>
      <li class="tree-item">item 1 child 2</li>
      <li class="tree-item">item 1 child 3</li>
    </ul>
  </li>
  <li class="tree-item">item 2</li>
</ul>

There's really nothing wrong with the HTML above. Using ul and li elements instead of a bunch of div elements is great, because ul and li elements should be used to build a list of items. Also, the class names are meaningful. However, classes like tree, tree-item, and collapsed don't follow a spec and won't be consistently used from site to site where tree controls have been implemented—WAI-ARIA can help solve this problem. WAI-ARIA allows you to develop markup that looks like this:

<ul role="tree">
  <li role="treeitem" aria-expanded="false" aria-level="1">
    <ul role="group">
      item 1
      <li role="treeitem" aria-level="2">item 1 child 1</li>
      <li role="treeitem" aria-level="2">item 1 child 2</li>
      <li role="treeitem" aria-level="2">item 1 child 3</li>
    </ul>
  </li>
  <li role="treeitem" aria-level="1">item 2</li>
</ul>

Most of the Classes Are Gone—What About My CSS?

You don't need classes to style your markup. Target your HTML elements, and target the WAI-ARIA roles, states and properties using the attribute selector. For example, you could style the markup above as follows (from my LESS sheet):

ul[role="tree"] {
  list-style-type: none;
  &:focus {
    outline:1px dotted #0000ff;
  }
  li {
    list-style-type: none;
    &[aria-selected="true"] {
      color:#0000ff;
    }
    &[aria-expanded="false"] > ul {
      display:none;
    }
    &[aria-expanded="true"] > ul {
      display:block;
    }
  }
}

See It In Action

Too see WAI-ARIA in action check out the a11yTree jQuery plugin. I built it, because I wanted to learn more, and didn't quite like the other available tree plugins. HTML semantics with WAI-ARIA is important to ensuring the best online experience for everyone. Finally, if you're a craftsman you should take pride in this stuff just as much as everything else you do—HTML is code, too.