Structuring a page with ARIA landmarks

Component

Publication date September 05, 2025

Update of the article from January 15, 2018

Introduction

In this article, we'll look at how to improve web page navigation by programmatically structuring content using semantic HTML elements.

This structure will enable users who navigate with assistive technologies (e.g., a screen reader) or only with the keyboard, to better understand the page content through their assistance tools, without having to browse through it. This saves a considerable amount of time and energy.

The use of these semantic elements is a best practice that we strongly recommend for all web pages, given the ease of implementation and the ease of navigation it provides.

Please note: This best practice is not a requirement of the WCAG. However, it may become one in the broader context of criterion 2.4.1 “Bypass Blocks (Level A)”. To find out more about its implementation, see Technique ARIA11: Using ARIA landmarks to identify regions of a page.

Theory

There are 2 ways to add HTML5 semantics to a page content:

For an HTML5 page (recommended): use the semantic tags (main, header, footer, aside, etc.) that have been introduced. These tags can be used independently of the corresponding ARIA roles, as they are well supported by the vast majority of browsers and assistive technologies.


    <head>
      […]
      <title>Page title</title>
      […]
    </head>
    
    <body>
      <header>
        <img>logo</img>
        <h1>Application name</h1>
        <nav>…navigation…</nav>
        […]
      </header>

      <main>
        <nav aria-label="Breadcrumb">[…]</nav>
        <section>
          <h1>News</h1>
          <p>June 21th, 2025 - Music festival</p>
          <p>…section content…</p>
        </section>
        <article>
          […]
        </article>
        […]
      </main>

      <aside>
        <p>…ancillary content related to the main content…</p>
        […]
      </aside>

      <footer>
        <p>…footer content: copyright…</p>
        […]
      </footer>
    </body>

For a non-HTML5page: add the ARIA landmarks:


      <head>
        […]
        <title>Page title</title>
        […]
      </head>

      <body>
        <div role="banner">
          <img>logo</img>
          <h1>Application name</h1>
          <div role="navigation">…navigation…</div>
          […]
        </div>

        <div role="main">
          <div role="navigation" aria-label="Breadcrumb">[…]</nav>
          <div role="region">
            <h1>News</h1>
            <p>June 21th, 2025 - Music festival</p>
            <p>…region content…</p>
          </div>
          <div role="article">
            […]
          </div>
          […]
        </div>

        <div role="complementary">
          <p>…aside content…</p>
          […]
        </div>

        <div role="contentinfo">
          <p>…footer content: copyright…</p>
          […]
        </div>
      </body>

Correspondence between HTML5 tags and ARIA landmarks


HTML5 tags	ARIA landmarks
`header`	`role="banner"` only in certain cases (see Usage below)
`nav`	`role="navigation"`
`search - no HTML5 tag`	`role="search"`
`main`	`role="main"`
`form`	`role="form"`
`section`	`role="region"`
`aside`	`role="complementary"`
`footer`	`role="contentinfo"` only in certain cases (see Usage below)

Usage

The header tag (or the ARIA landmark attribute role="header") identifies the page header. This is only true if this element is placed in a body tag, either as a direct child, or in an HTML tag other than article, aside, main, nav and section.

In general and to simplify things, we recommend using the header tag (or the ARIA landmark attribute role="header") only once per page.

nav

The nav tag (or the ARIA landmark attribute role="navigation") identifies the site's main internal navigation elements.

A maximum of 3 nav tags (or role="navigation") should be used on a single page.

When several nav are used, each must have a unique accessible name that will allow them to be identified (see Best practices).

role="search"

The ARIA landmark attribute role="search" (no equivalent HTML tag) is used to identify a search form on the site or to filter content on the page.

main

The main tag (or the ARIA landmark attribute role="main") identifies the main content of the page.

This element, which must be present on every HTML page, is to be used only once per page, and only as a child of the HTML tags body, html, div and form.

Note: if an HTML page contains an iframe, it can also contain a main tag (or a role="main" attribute) because it's a stand-alone page.

For more details, see Mainlining Mains.

form

The form tag (or the ARIA landmark attribute role="form") is used to identify a form. Its children will be form element tags such as input, select, textarea or button.

There can be several form tags (or role="form" attributes) on the same page. In this case, add a unique accessible name (see Best practices).

section

The section tag (or the ARIA landmark attribute role="region") can be used to group content (e.g., chapters of a book, large sections of a home page, etc.) thematically.

Several section tags (or role="region" attributes) may be present in the page. A unique accessible name is required for each occurrence (see Best practices).

aside

The aside tag (or the ARIA landmark attribute role="complementary") is used to identify content that is ancillary to the page main content (additional information, advertising, etc.).

This element is to be placed as a direct child of the body tag.

There may be several aside tags (or role="complementary" attributes) on the same page. In this case, systematically add a unique accessible name to each one (see Best practices).

The footer tag (or the ARIA landmark attribute role="contentinfo") is used to identify the footer. This is only true if this element is placed in a body tag, either as a direct child, or in an HTML tag other than article, aside, main, nav and section.

To simplify things, we recommend using the footer tag (or the ARIA landmark attribute role="contentinfo") only once per page.

Note: if an HTML page contains an iframe, it can also contain a main tag (or a role="main" attribute) since it's a stand-alone page.

Best practices

When several landmarks of the same type are present on the page, it may be appropriate to give each one a different accessible name to enable technical support users to differentiate between them. An accessible name is added to:
- an aria-labelledby attribute pointing to the header title whose content you want to use as an accessible name, if the region has a header title.
- an aria-label attribute, if the region doesn't have a header title (e.g., text in an h1 to h6 tag).
Note: an aria-describedby attribute, pointing to an element whose content you want to use as a complement to the accessible name (accessible description), can also be used to specify the function of a region.

Example of a page with three navigation landmarks:
```
    <nav aria-label="Main menu">[…]</nav >
    <nav aria-label="Secondary menu">[…]</nav>
    <nav aria-label="Breadcrumb">[…]</nav>
    
```
More details on "The ARIA attributes that can save you".
All page content must be included in HTML5 tags of in ARIA structure landmarks. This allows users to access all contents, even the ones not easily discoverable, because outside of these tags.
Exception: Modal dialog boxes do not need to be nested within a region tag.

ARIA landmarks, users and assistive technologies

The HTML5 tags defining the main regions of the page have sufficient support with assistive technologies (screen readers, magnifying software...). We must therefore use them to structure our page without adding ARIA landmark roles.

Setting up these landmarks ARIA is a good practice, because it can improve the browsing of some users without impacting that of others. It's an important best practice!