WAI-ARIA role taxonomy for Accessible Rich Internet Applications

What are WAI-ARIA roles and what are they good for?

WAI-ARIA roles get used to annotate page elements. One of the goals we want to achieve by using WAI-ARIA roles is to improve accessibility, this means improving the way screen readers parse the document and therefore make it better machine readable so that screen readers can represent the content to the user with text-to-speech, sound icons, or on Braille output device.

Another goal is that we also improve the way search engines consume our content, because if you care about SEO it is never a bad idea to improve the semantic value of your document. If you use the ARIA roles and maybe also the new HTML5 elements you will improve the semantic value of your content. The more we define the structure of our documents the easier it is for a search engines to extract the valuable content. We can therefore also avoid getting penalized because we are tagging the content that is complementary and that is found on each of our pages, by clearly separating it from the more important part of the document.

landmark roles

Especially for landmark and document roles you will notice that we use roles that are equal to the tag we have applied them to. This is not a bad thing, we don't exactly know if the browser, the reader, the search engine or the tool that will consume our page and therefore it is normal to use multiple techniques. Each technique adds semantic value and therefore we ensure that at least one of those techniques is being taken into account when the content gets parsed.

"main" role

Within our document we probably have a "main" area where the main content that the user requested resides within. The other parts are the navigation, the header and footer, an maybe some widgets in an "aside" column.

If your HTML5 document looks like the following one you might want to add the role main to the div containing the articles list to indicate that is the most valuable content on the page, the content the user probably hopes to find.

One important rule is to use the main role only once per page, the w3c says: "Within any document or application, the author SHOULD mark no more than one element with the main role."

This role is so meaningful, that the w3c group recently accepted a proposal for an HTML5 tag with "main" as name, more about this story can be found in this webmonkey article.

"banner" role

You probably have a horizontal header on your website. In your header you probably have your website logo, maybe a search box, a slogan, ... If you use HTML5 you may have used the header element, you could add the role "banner" to the header tag. This way you indicate that this header tag is the main website banner unlike any other header elements that may reside within your document.

Like main the same rule applies to banner, only one marked element per page is allowed.

"navigation" role

If you use HTML5 elements one of your document parts probably uses the "nav" tag, you could add the role "navigation" to it. You can have multiple "nav" elements and you can also tag each of them using the role navigation.

"complementary" role

This role indicates that the content within that element is complementary to what is found in the element tagged "main".

The w3c has a very good explanation as to for which elements you should use this role, they say you can use it for any content that is "complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content". So for example for a widgets sidebar containing multiple website widgets like the most read articles list, the tags cloud and so on ...

You can find even more information about wai-aria roles, on the the w3c wai-aria landmark roles page.

This is the final basic HTML5 with ARIA roles document:


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>WAI-ARIA roles in action</title>
	</head>
	<body>
        <header role="banner">
            <hgroup>
                <h1>the content of h1</h1>
                <h2>the content of h2</h2>
            </hgroup>
            <nav id="menu" role="navigation">
                <ul role="menubar">
                    <li>
                        <a href="#">first link</a>
					</li>
					<li>
                        <a href="#">second link</a>
                    </li>
                </ul>
            </nav>
        </header>
        <aside role="complementary">
            <p>some aside content</p>
        </aside>
        <div role="main">
            <article role="article">
                <header>
                    <p>first article header</p>
                </header>
                <p>first article</p>
                <footer>
                    <p>first article footer</p>
                </footer>
            </article>
            <article>
                <p>second article</p>
            </article>
        </div>
        <footer>
            <p>some footer content</p>
        </footer>
	</body>
</html>

document roles

"article" role

The article role is used to mark the part of the page that contains your article or blog post, but like the article HTML5 element, the article role can also be used to mark comments.

"img" role

The "img" role could for example be used with a HTML5 "figure" tag. It has a similar semantic meaning, as it describes an area which holds one or more images with descriptions (figcaption) of those images.

You can find even more information about wai-aria roles, on the the w3c wai-aria document roles page.

widgets roles

Widgets roles are for widgets in the document you for might have added using javascript and a library like jquery or using css. For example a tooltip that appears when the user hovers over a portion of your document gets the role "tooltip".

You can find even more information about wai-aria roles, on the the w3c wai-aria widgets roles page.

Using css to style elements that were tagged with a role

To style our "main" content section and add a border to it, as well as putting our aside element left to the main content section we could use the following css:


<style>

	div[role="main"] {
		1px dotted blue;
		float: right;
		width: 70%;
	}

	aside[role="complementary"] {
		float: left;
		width: 30%;
	}
	
	.clearfix {
		clear:both;
	}

</style>

Access an element that was tagged with a role using jQuery

Here is an example of a little script, that sets the id of a section, which has the role main:


<script>

	function changeMainId(main_id) {

		$('div[role="main"]').attr({
			id: main_id
		});

	}
	
	$(document).ready(function () {
	
		changeMainId('page2');
		
	});

</script>

The final HTML5 document with WAI-ARIA semantic tagging:


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>WAI-ARIA roles in action</title>
		<style>

			div[role="main"] {
				1px dotted blue;
				float: right;
				width: 70%;
			}

			aside[role="complementary"] {
				float: left;
				width: 30%;
			}
			
			.clearfix {
				clear:both;
			}

		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script>
		
			function changeMainId(main_id) {

				$('div[role="main"]').attr({
					id: main_id
				});
				
				console.log('main_id: ' + main_id);

			}
			
			$(document).ready(function () {
			
				changeMainId('page2');
				
				console.log('page2');
				
			});

		</script>
	</head>
	<body>
        <header role="banner">
            <hgroup>
                <h1>the content of h1</h1>
                <h2>the content of h2</h2>
            </hgroup>
            <nav id="menu" role="navigation">
                <ul role="menubar">
                    <li>
                        <a href="#">first link</a>
					</li>
					<li>
                        <a href="#">second link</a>
                    </li>
                </ul>
            </nav>
        </header>
        <aside role="complementary">
            <p>some aside content</p>
        </aside>
        <div role="main">
            <article role="article">
                <header>
                    <p>first article header</p>
                </header>
                <p>first article</p>
                <footer>
                    <p>first article footer</p>
                </footer>
            </article>
            <article>
                <p>second article</p>
            </article>
        </div>
        <footer class="clearfix">
            <p>some footer content</p>
        </footer>
	</body>
</html>
Tags:
wai aria semantic accessibility

Comments

 ______    _    _    _    _    __   __  
|      \\ | || | || | |  | ||  \ \\/ // 
|  --  // | || | || | |/\| ||   \ ` //  
|  --  \\ | \\_/ || |  /\  ||    | ||   
|______//  \____//  |_// \_||    |_||   
`------`    `---`   `-`   `-`    `-`'