ARIA Landmark Region Patterns
Based on the W3C ARIA Authoring Practices for Landmark Regions
A main landmark identifies the primary content of the page.
ARIA 1.2 Specification: main landmark
main landmark.main landmark should be a top-level landmark.document and/or application roles (e.g. typically through the use of iframe and frame elements),
each document or application role may have one main landmark.
main landmark, each should have a unique label.main element always defines a main landmark.
When only one main landmark on a page, a label is optional.
<main>
<h1>title for main content<h1>
.... main content area ....
</main>
When there is more than one main landmark on a page, each should have a unique label.
<main aria-labelledby="title1">
<h1 id="title1">title for main content area 1<h1>
.... main content area 1 ....
</main>
....
<main aria-labelledby="title2">
<h1 id="title2">title for main content area 2<h1>
.... main content area 2 ....
</main>
A role="main" attribute is used to define a main landmark.
When only one main landmark exists on a page, a label is optional.
<div role="main">
<h1>title for main content<h1>
.... main content area ....
</div>
When there is more than one main landmark on a page, each should have a unique label.
<div role="main" aria-labelledby="title1">
<h1 id="title1">title for main content area 1<h1>
.... main content area 1 ....
</div>
....
<div role="main" aria-labelledby="title2">
<h1 id="title2">title for main content area 2<h1>
.... main content area 2 ....
</div>