Question

It seems redundant to use an ARIA landmark if the most semantic and accessible way to define the main section of your content is the standard <main> element. Is adding role="main" to the element really necessary?

Was it helpful?

Solution

Not all modern browsers have already mapped the aria-role main to the <main> element (so far only Firefox 21+ and Chrome 26+ have mapped it). When all browser will support this feature, then the attribute role="main" could be dropped, but in the meanwhile it's better to still use it.

Sources:

http://html5doctor.com/the-main-element/#comment-35495 (and Steve Faulkner's answer) http://html5doctor.com/the-main-element/#comment-36407 (last citation and answer)

OTHER TIPS

It depends on your reason that why you are indent to use 'role'.

The two primary reasons to use roles in your native semantic element is:

Reason 1. Overriding the role where no host language element is appropriate or, for various reasons, a less semantically appropriate element was used.

Example:

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

In the above example, a link was used, even though the resulting functionality is more button-like than a navigation link.

Screen readers will hear this as a button (as opposed to a link), and you can use a CSS attribute selector to avoid class-itis and div-itis.

*[role="button"] {
  /* style these a buttons w/o relying on a .button class */
}

Reson 2. Backing up a native element's role, to support browsers that implemented the ARIA role but haven't yet implemented the native element's role.

For example, the "main" role has been supported in browsers for many years, but it's a relatively recent addition to HTML5, so many browsers don't yet support the semantic for .

<main role="main">…</main>

This is technically redundant, but helps some users and doesn't harm any. In a few years, this technique will likely become unnecessary.

You can check the below link for more info...

Accessible Rich Internet Applications (WAI-ARIA) 1.0

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top