W3C Logo

ARIA Landmarks Example

Visually outline the landmarks and/or headings on the page using the following buttons.

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 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.

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>

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>

Use the HTML5 main element to define a main landmark.

HTML5 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>

HTML5 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>