Table of Contents for

The Modern Web

WAI-ARIA

The Web Accessibility Initiative’s Accessible Rich Internet Applications suite (WAI-ARIA to its friends) was created to address the shortfall in accessibility that was created as the Web moved beyond simple document markup and into an era of applications and interactivity.

WAI-ARIA does this by creating a number of HTML extensions (or, in fact, extensions for any DOM-based languages, such as SVG and XML), allowing developers to make browsers and assistive technology aware of interactive content. For example, if you have a link that uses JavaScript to create an on-screen dialog overlay when clicked, you have no way to make the browser aware of it; the markup just looks like a standard link:

<a href="http://example.com">Launch popup</a>

Because the event is attached to the link using script, the screen reading device has no information about what happens here and can’t give any context to the user, who remains unaware of the functionality. WAI-ARIA introduces a new attribute, aria-haspopup, for just this situation, giving information to the user about what’s going on:

<a href="http://example.com" aria-haspopup="true">Launch popup</a>

A whole range of new attributes is available, among them what are known as landmark roles; these attributes make screen readers and other accessible navigation devices aware of your page’s structure, so the user can easily find their way around your document. This solution goes some way toward fulfilling the structural obligations that the new HTML5 elements were created to fulfill.

Landmark roles are applied using the role attribute with a series of predefined values. These values do not directly correspond to the HTML5 structural elements, but they mostly match very well. For example, if you want to define the document area that contains general information about the site, such as the logo and strap line, you add the banner role:

<div role="banner">…</div>

This role is broadly analogous to the header element and, in most cases, will be used in its place.

Some landmark roles don’t have an HTML5 equivalent: Believe it or not, no suitable element exists for indicating where the main content of a page is, so to let the screen reader know the location of key content, we have the main role:

<div role="main">…</div>

Eight landmark roles are defined in the WAI-ARIA spec:

As well as being useful for navigating and providing some semantic value, the landmark roles make convenient styling hooks for CSS. Using the Exact Attribute Value Selector, you can easily apply rules to, for example, the page header:

div[role='contentinfo'] { background-color: blue; }

This selector has been implemented in pretty much every browser made in the last 10 years (that I’m aware of), so unless you’re using a very old or basic one, this technique is useful—be aware that complex selectors can have an adverse effect on page-loading times, however.