HTML5 contains several new elements that are considered semantic in that they more accurately describe the content they contain than a generic element such as a div.
These new elements improve accessibility as standalone structure, because of the semantic underpinnings they carry with them. The elements in question are: header, footer, main, section, article, aside, and nav. Simply using them without any additional coding such as the WAI-ARIA landmark roles I’m going to describe today is an improvement.
The roles I’ll describe are banner, complementary, contentinfo, form, main, navigation, search. The names make the role pretty obvious, but some roles have fine points.
The header element
In HTML5, the header element can be used repeatedly on a page. It can be the main header for the entire page, or a header for a subsection of the page such as a section or an article or an aside.
If the header element is used at the main header for the entire page, the role banner can be assigned to it. Only one header on a page can have the role banner.
<header role="banner"> . . .</header>
Within the page there may be header elements used as article or section or aside headings. The ARIA role that can by used in that case is heading.
<article><header role="heading">Article heading</header>Article body</article>
The heading role can also be used in tables.
The footer element
In HTML5, the footer element can be used repeatedly on a page. It can be the main footer for the entire page, or a footer for a subsection of the page such as a section or an article or an aside.
The main page footer can use the role contentinfo. But footer elements for subsections of a page may not use this role. It can only be used once on a page.
<footer role="contentinfo"> footer for entire page</footer>
Depending on what kind of information is included in the footer for articles or other smaller page sections, the footer might be appropriately labeled with the complementary role.
<footer role="complementary"> informative footer for an article</footer>
The aside element
The aside element is meant for complementary material, not crucial to the page content, but supplementary. Therefore the complementary role is perfect for it.
<aside role="complementary"> supplemental content</aside>
Main, Navigation, Form and Search
You’ve seen how simple it is to assign a role to an element, so I’ll stop giving code examples. There are just a few points about the roles main, navigation, form and search. It seems self-evident when to apply navigation, form, and search to page elements. But main is another role that can only be used once on a page to indicate the main content, which might be contained in a main, div or section element. Using the main role properly eliminates the need for those “jump to main content” links that were so prevalent for a while on the web.
ARIA Roles are not only for HTML5
The last point to keep in mind is that ARIA roles work in all flavors of HTML. They do not depend on the use of HTML5 to make your web page accessible. Even if you are not ready to switch to HTML5, you should begin using ARIA roles.
See Also: ARIA Roles 101 and How to Make HTML5 Semantic Elements more Accessible.
This article was been translated into Brazilian-Portuguese.
Translation is hosted at: http://maujor.com/tutorial/melhorando-acessibilidade-na-html5-com-uso-de-wai-aria.php
Regards
Maujor
Nice post. This is one of many simple steps to make your site more accessible. I’ve got a section @ http://itstiredinhere.com/accessibility#aria that helps people understand how to see the benefits for themselves.
If you are translating content and intend non-english users to access through the screen reader, do you translate the role text that is included on the tags ? or are the translated versions of the screen readers able to pick up the term “navigation” and render the spoken word in native language ?
@Leah, I cannot answer that. Perhaps one of the readers who internationalizes their web content will know the answer and give you the information you need.