Adding ARIA Landmark Roles

ARIA Landmark Roles were recently added to the Web Axe web site. It's a great and easy way to add better accessibility to your site, start learning ARIA, and future-proof your site. And it only takes a few minutes, so why not add it into your site? (If you haven't already!)

An ARIA landmark role is simple an attribute added to a (probably) already existing tag in your site. For example, to add a search role, simple add the attribute role="search" to the tag which contains the search content (the div, fieldset, etc).

Here are some basic landmark roles with links to the W3C definitions:

• banner - usually the main header of your site; the area with logo, slogan, etc.
• complementary - supporting section of page, separate from the main content, like a sidebar.
• contentinfo - area that contains information about the site such as copyright lines and links to privacy notices (i.e. page footer).
• main - the main content; area with central topic of the web page.
• navigation - a section for navigating the site.
• search - a section with a any type of search tool.

In the following example, four landmark roles are used to create a basic page structure.

<div role="banner">
[header content]
</div>
<div role="navigation">
[nav content]
</div>
<div role="main">
[main content]
</div>
<div role="contentinfo">
[footer content]
</div>

Addendum

If more than one type of role is implemented, use the aria-labelledby attribute to give each a unique name. Here's an example from this web page which has two navigation role attributes.

<div role="navigation" aria-labelledby="prevpostsLabel">
<h2 id="prevpostsLabel">Previous Posts</h2>

<div role="navigation" aria-labelledby="archiveLabel">
<h2 id="archiveLabel"><label for="archivemenu">Archives</label></h2>