Using WAI-ARIA landmark roles in HTML5 markup

Since WAI-ARIA landmark roles have been added into the HTML5 spec, I thought it was about time I got round to updating this site with specific WAI-ARIA landmarks as an aide to accessibility. WAI-ARIA defines a way to make web content and web applications more accessible to people with disabilities. Landmark roles provide a mechanism for assisted technologies to identify commonly found sections of web page content, enabling users to quickly and easily navigate a web site.

Navigating page structure

Here is a basic example of my site template. I have highlighted the specific roles assigned to each structural element:

<!DOCTYPE html>
<head>
<title>Page title</title>
</head>
<body>

<!-- Navigation -->

<nav role="navigation">
	<ul>
	<li><a href="">Link 1</a></li>
	<li><a href="">Link 2</a></li>
	<li><a href="">Link 3</a></li>
	</ul>
</nav>

<!-- Header -->

<header role="banner">
	<h1>Page heading</h1>
</header>

<!-- Main Content -->

<article role="main">
	<time datetime="2009-09-01">September 01, 2009</time>
	<h2>Article heading</h2>
	<p>Content here</p>
</article>

<aside role="complementary">
	<p>Content here</p>
</aside>

<!-- Footer -->

<footer role="contentinfo">
	<small>Copyright © 2009</small>
</footer>

</body>
</html>

I have also added role="search" to a containing div around the search form. I have used a div as the spec does not currently allow a role to be assigned directly to a form element.

<div role="search">
<form method="get" action="">
	<fieldset>
	<label for="search">Site search:</label>
	<input type="search" id="search" required aria-required="true" />
	<button type="submit">Search</button>
	</fieldset>
</form>
</div>

Highlighting required form fields

On each web form I have added the attribute aria-required="true" to the input fields that flag the HTML5 required boolean attribute as true. This indicates to ARIA users that they are required fields.

<form method="get" action="">
	<fieldset>
	<label for="email">Subscribe via email:</label>
	<input type="email" id="email" required aria-required="true" />
	<button type="submit">Subscribe</button>
	</fieldset>
</form>