How to Use Navigation Hints with ARIA Roles in HTML5

, , Leave a comment

Most of the website structure is Header, navigation, section main content and footer. Unfortunately, the screen reader may have to read the site to its user in that order. Since most sites repeat the same header and navigation on each page, the user will have to hear these elements each time they visit another page.

HTML5 interduce a new role attribute. This lets us assign a ‘responsibility‘ to each element on your page. Then the screen reader can very easily parse the page and categorize all of those responsibilities, so that you can create a simple index for the page.

Demo

These roles are coming from the WIA-ARIA specification and have been incorporated into the HTML5 specification. There are two specific classifications of roles that you can Use it right now.

1. Landmark roles

2. Document Structure Roles

1. landmark roles

Landmark roles identify ‘points of interest’ on your site, such as the banner, search area, or navigation that screen readers can quickly identify.

Role Use

banner:Identifies the banner area of your page

search:Identifies the search area of your page

navigation:Identifies navigational elements on your page

main:Identifies where your page’s main content begins

contentinfo:Identifies where information about the content exists,such as copyright information and publication date

complementary:Identifies content on a page that complements the main content but is meaningful on its own application Identifies a region of a page that contains a web application as opposed to a web document

HTML

{code}<header id=”page_header”>

<h1>Sendesignz Blog!</h1>

<nav>

<ul>

<li><a href=”/”>Latest Posts</a></li>

<li><a href=”/archives”>Archives</a></li>

<li><a href=”/contributors”>Contributors</a></li>

<li><a href=”/contact”>Contact Us</a></li>

</ul>

</nav>

</header>

<section  id=”posts”>

</section>

<section id=”sidebar”>

<nav>

<h3>Archives</h3>

<ul>

<li><a href=”#”>January 2011</a></li>

<li><a href=”#”>December 2010</a></li>

<li><a href=”#”>November 2010</a></li>

<li><a href=”#”>October 2010</a></li>

<li><a href=”#”>September 2010</a></li>

<li><a href=”#”>August 2010</a></li>

<li><a href=”#”>July 2010</a></li>

<li><a href=”#”>June 2010</a></li>

<li><a href=”#”>May 2010</a></li>

<li><a href=”#”>April 2010</a></li>

</ul>

</nav>

</section>

<footer id=”page_footer”>

<p>&copy; 2011 Sendesignz.</p>

</footer>{/code}

 

CSS

{code}body{

 

width:960px;

margin:15px auto;

font-family: Arial;

}

p{

margin:0 0 20px 0;

}

header#page_header nav ul{

list-style: none;

margin: 0;

padding: 0;

}

#page_header nav ul li{

padding:0;

margin: 0 20px 0 0;

display:inline;

}

section#posts{

float: left;

width: 74%;

}

section#sidebar{

float: left;

width: 25%;

}

footer#page_footer{

clear: both;

width: 100%;

display: block;

text-align: center;

}{/code}
For the overall header, let’s apply the banner role
{code}

<header id=”page_header” role=”banner”>

</header>
{/code}
All that’s needed is the addition of the role=”banner” to the header tag.

We can identify our navigation in a same way

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 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.

{code}<nav role=”navigation”>

</nav>{/code}
Our main and sidebar regions can be identified as follows
{code}<section  id=”posts” role=”main”>

</section>{/code}
{code}<section id=”sidebar” role=”complementary”>

</section>{/code}
We identify the copyright info in our footer using the contentinfo role like this:
{code}<footer id=”page_footer” role=”contentinfo”>

</footer>{/code}

Full HTML Code

{code}<header id=”page_header” role=”banner”>

<h1>Sendesignz Blog!</h1>

<nav role=”navigation”>

<ul>

<li><a href=”/”>Latest Posts</a></li>

<li><a href=”/archives”>Archives</a></li>

<li><a href=”/contributors”>Contributors</a></li>

<li><a href=”/contact”>Contact Us</a></li>

</ul>

</nav>

</header>

<section id=”posts” role=”main”>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut semper quam. Nulla aliquam mi eu metus vulputate quis mattis elit feugiat. Fusce aliquam, enim id fringilla interdum, dui risus ullamcorper urna, sed rutrum est enim sed magna. Nulla facilisi. In hac habitasse platea dictumst. Nulla nulla eros, accumsan eu pharetra vitae, lacinia at mauris.

</p>

<p>

Maecenas iaculis, elit at tempor imperdiet, purus orci sollicitudin ipsum, nec elementum justo diam non metus. Aliquam tincidunt diam eu velit gravida eleifend.

</p>

</section>

<section id=”sidebar” role=”complementary”>

<nav>

<h3>Archives</h3>

<ul>

<li><a href=”#”>January 2011</a></li>

<li><a href=”#”>December 2010</a></li>

<li><a href=”#”>November 2010</a></li>

<li><a href=”#”>October 2010</a></li>

<li><a href=”#”>September 2010</a></li>

<li><a href=”#”>August 2010</a></li>

<li><a href=”#”>July 2010</a></li>

<li><a href=”#”>June 2010</a></li>

<li><a href=”#”>May 2010</a></li>

<li><a href=”#”>April 2010</a></li>

</ul>

</nav>

</section>

<footer id=”page_footer” role=”contentinfo”>

<p>&copy; 2011 Sendesignz.</p>

</footer>{/code}

2. Document Structure Roles

Document structure roles help screen readers identify parts of static content easily, which can help better organize content for navigation.

Role Use

document: Identifies a region containing document content, as opposed to application content.

article: Identifies a composition that forms an independent part of a document.

definition:Identifies a definition of a term or subject.

directory:Identifies a list of references to a group, like a table of contents. Used for static content.

heading:Identifies a heading for a section of a page.img Identifies a section that contains elements of an image. This may be image elements as well as captions and descriptive text.

list:Identifies a group of noninteractive list items.

listitem:Identifies a single member of a group of noninteractive list items.

math:Identifies a mathematical expression.

note:Identifies content that is parenthetic or ancillary to the main content of the resource.

presentation:Identifies content that is for presentation and can be ignored by assistive technology.

row:Identifies a row of cells in a grid.

rowheader:Identifies a cell containing header information for a row in a grid.

Many of the document roles are implicitly defined by HTML tags, such as articles and headers.

Share this: