ARIA Landmark Region Patterns
Based on the W3C ARIA Authoring Practices for Landmark Regions

Region Landmark

A region landmark is a perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page.

ARIA 1.2 Specification: region landmark

Design Patterns

  • A region landmark must have label using aria-labelledby or aria-label.
  • If a page includes more than one region landmark, each should have a unique label.
  • The region landmark can be used identify content that named landmarks do not appropriately describe.
The section element is a region landmark when it has a label.
The recommended labeling technique is to use an aria-labelledby reference to a visible heading (e.g. an h2-h6) element.

HTML Example: Using section[aria-labelledby] attribute

Defines a label for each region using existing content on the page.

<main>

  <h1>title for main content area<h1>

  <section aria-labelledby="region1">

    <h2 id="region1">title for region area 1</h2>

    ... content for region area 1 ...

  </section>

  <section aria-labelledby="region2">

    <h2 id="region2">title for region area 2</h2>

    ... content for region area 2 ...

  </section>

</main>

HTML Example: Using section[aria-label] attribute

Defines a label for each region using attribute value that is only visible to assistive technologies.

<main>

  <h1>title for main content<h1>

  <section aria-label="title for region area 1">

    <h2>title for region area 1</h2>

    ... content for region area 1 ...

  </section>

  <section aria-label="title for region area 2">

    <h2>title for region area 2</h2>

    ... content for region area 2 ...

  </section>

</main>

HTML Example: Using section[title] attribute

Defines a label for each region using attribute value that maybe available as a tooltip on some browsers.


<main>

  <h1>title for main content<h1>

  <section title="title for region area 1">

    <h2>title for region area 1</h2>

    ...content for region area 1...

  </section>

  <section title="title for region area 2">

    <h2>title for region area 2</h2>

    ...content for region area 2...

  </section>

</main>
Use a role="region" attribute with a label using aria-labelledby or aria-label to define a region landmark.
The recommended labeling technique is to use an aria-labelledby reference to a visible heading (e.g. an h2-h6) element.

ARIA Example: Using role="region" attribute

<div role="main">

  <h1>title for main content area<h1>

  <div role="region" aria-labelledby="region1">
    <h2 id="region1">title for region area 1</h2>

    ... content for region area 1 ...

  </div>

  <div role="region" aria-labelledby="region2">

    <h2 id="region2">title for region area 2</h2>

    ... content for region area 2 ...

  </div>

</div>