Role Use
Identifies where information about the content, such as
copyright information and publication date, existscontentinfoIdentifies the section of a page that contains a form, using
both native HTML form elements as well as hyperlinks and
scripted controlsformmain Identifies where your page’s main content begins
navigation Identifies navigational elements on your page
search Identifies the search area of your pageLet’s apply a few of these roles to the AwesomeCo blog template we worked
on in Tip 1, Redefining a Blog Using Semantic Markup, on page 15.For the overall header, we apply the banner role like this:
html5_aria/blog/index.html
<headerid="page_header"role="banner">
<h1>AwesomeCoBlog!</h1>
</header>All that’s needed is the addition of role="banner" to the existing
We can identify our navigation the same way:
html5_aria/blog/index.html
<navrole="navigation">
<ul>
<li><ahref="#">LatestPosts</a></li>
<li><ahref="#">Archives</a></li>
<li><ahref="#">Contributors</a></li>
<li><ahref="#">ContactUs</a></li>
</ul>
</nav>The HTML5 specification says that some elements have default roles and can’t
be overridden. The nav element must have the role of navigation, and this role
technically doesn’t need to be specified. Screen readers aren’t quite ready to
accept that default yet, but many of them do understand these ARIA roles.
So, to be safe, we’ll be very specific.Our main content and sidebar regions can be identified as follows:
html5_aria/blog/index.html
<sectionid="posts"role="main">
</section>Chapter 5. Making Accessible Interfaces • 94
Download from Wow! eBook <www.wowebook.com> report erratum • discuss