Main Landmark
A main landmark identifies the primary content of the page.
ARIA 1.1 Specification: main landmark
Design Patterns
- Each page should have one
mainlandmark. - The
mainlandmark should be a top-level landmark. - When a page contains nested
documentand/orapplicationroles (e.g. typically through the use ofiframeandframeelements), eachdocumentorapplicationrole may have onemainlandmark. - If a page includes more than one
mainlandmark, each should have a unique label.
Use the HTML main element to define a main landmark.
HTML Example: One 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>
<h1>title for main content<h1>
.... main content area ....
</main>
HTML Example: Multiple Main Landmarks
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>
<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.
ARIA Example: One 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>
<h1>title for main content<h1>
.... main content area ....
</div>
ARIA Example: Multiple Main Landmarks
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>
<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>