HTML5 main element versus ARIA landmark role=“main”

I'm interested to learn more about the relationship, and possible distinctions, between the HTML5 <main> element, and the ARIA landmark role attribute role="main".

I'm under the impression that the purpose of the <main> element is to map the ARIA roll attribute role="main" onto a specific HTML element. But does that sum it up?

Are there benefits to using <main> over, say, <div role="main">? Or will these, for now and the foreseeable future, yield the same result?

Any insights in comparing the following examples would be greatly appreciated:

<body>
  <main>
    <p>Paragraph</p>
  <main>
</body>

<body>
  <main role="main">
    <p>Paragraph</p>
  <main>
</body>

<body>
  <div role="main">
    <p>Paragraph</p>
  <div>
</body>

According to HTML5 Doctor they are equivalent. <main> just makes it easier and neater to implement role="main".

The primary purpose of is to map ARIA’s landmark role main to an element in HTML.

Here is a general description of the <main> element.

The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

Recommendation

It is recommended to use use both <main> and role="main" in the same element until browsers implement <main> properly.

<!-- Recommended -->
<main role="main">
    ...
</main>

Be sure to read the <main> spec if you're interested.

Note on sectioning

As Szabolcs points out in the comments, <main> is not a sectioning element so it should be used in conjunction with a <section> element.

References

来源：https://stackoverflow.com/questions/19595719/html5-main-element-versus-aria-landmark-role-main

标签

html

html5

accessibility

wai-aria