MAIN Landmark

Definition A main landmark identifies the primary content of the page.
ARIA Specification main landmark
Coding Patterns
  • Each page should have one main landmark.
  • The main landmark should be a top-level landmark.
  • When a page contains nested 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.
  • If a page includes more than one main landmark, each should have a unique label.
Techniques
  • Use the HTML5 main element to define a main landmark.
  • If the HTML5 main element technique is not being used, use a role="main" attribute to define a main landmark.
Headings
  • Each main landmark should have an h1 element describing the main content.
  • If there are more than one main landmarks on the page, use aria-labelledby to reference the h1 elements for labeling each landmark.

One Main Landmark

HTML5 main element technique

<main>

  <h1>title for main content<h1>

  .... main content....

</main>

[role="main"] attribute technqiue

<div role="main">

  <h1>title for main content<h1>

  .... main content....

</div>

Multiple Main Landmarks

<main aria-labelledby="title1">

  <h1 id="title1">title for main content 1<h1>

  .... main content....

</main>

....

<main aria-labelledby="title2">

  <h1 id="title2">title for main content 2<h1>

  .... main content....

</main>