Oh, at last the light dawns. This is what developers building apps sometimes need to do. Even at that, go back to point one about only using it when you really know what you’re doing and are absolutely sure you want to strip an element of its semantics.
Denis draws us to a sensible conclusion.
@vdebolt Don’t like the output? Just change the markup instead of hiding the semantics under a presentation role. /cc @jsutt
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.
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.