Menu
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> 
203
A landmark is an important subsection of a page. The landmark role is an abstract superclass for the aria role values for sections of content that are important enough that users will likely want to be able to navigate directly to them. Note: The landmark role is an abstract role.
When there is more than one main landmark on a page, each should have a unique label. A role="main" attribute is used to define a main landmark.
HTML5 elements such as main , nav , and aside act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump.
A main landmark provides a navigation point to the primary content of the page for users of assistive technologies. Most pages only need one main landmark, but in the case of portals or mashups, there may be more than one main landmark on a "page".
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
mainelement represents the main content of thebodyof 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.
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.
As Szabolcs points out in the comments, <main> is not a sectioning element so it should be used in conjunction with a <section> element.
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
