Landmarks ARIA

Introduction

In this example, we'll see how to improve page navigation by adding semantics to content that makes it easier to find the major regions of the page.

Theory

HTML5 introduces new tags, including semantic tags (main , aside , footer , and header , ...).

These tags should be used alone without the corresponding ARIA roles because their support is good in the vast majority of browsers and assistive devices.

For a page in HTML5:


  <head>
    …
    <title>Titre de la page</title>
    …
  </head>
  <body>
    <header>
      <h1>…</h1>
      <nav>…navigation…</nav>
      <p>page header : logo, baseline…</p>
      …
    </header>
    <main>
       <nav aria-label="Breadcrumb">[…]</nav>
       <section>
         <header>
           <h1>News</h1>
           <p>June 21th, 2018 - Music festival</p>
         </header>
         <p>section's content</p>
         <footer>
           <p>section footer content  : copyright…</p>
           …
         </footer>
      </section>
      <article>
      […]
      </article>

      […]

    </main>
    <aside>
      <p>aside's content</p>
      […]
    </aside>
    <footer>
      <p>footer content : copyright…</p>
      […]
    </footer>
  </body>

For a page that is not in HTML5, add the landmarks ARIA:


<head>
    …
  <title>Page title</title>
    …
</head>
<body>
    <div role="banner">
      <h1>…</h1>
      <div role="navigation">…navigation…</div>
      <p>page header : logo, baseline…</p>
      …
    </div>
  <div role="main">
  <div role="navigation" aria-label="Breadcrumb">[…]</nav>
    <div role="region">
      <div role="header">
        <h1>News</h1>
        <p>June 21th, 2018 - Music festival</p>
      </header>
      <p>region's content</p>
      <div role="contentinfo">
        <p>region footer content : copyright…</p>
      </div>
    </div>
    <div role="article">
    […]
    </div>

  […]

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

Usage

There can only be one main tag or one role=main per page to identify the main content of a page.
The section or role=region tag is used to thematically group content, for example, chapters of a book, large parts of a page of Home...
The article or role=article tag is an autonomous portion of the page, usually reusable, for example, a blog post, a newspaper, a comment of a blog...
The role=navigation or the nav tag identifies the main navigations internal to the site. Good practice requires that you use 3 nav tags maximum per page.
The footer tag or the role=contentinfo identifies the footer. It must be unique in the page, except when it is present in section tags, role=region or article , role=article .
The tag header or role = header identifies the header of the page. It must also be unique, except when it is present in section tags, role=region or article, role=article.
To identify the search form in the site, we will use role=search ARIA alone.
If necessary, the content annexed to the main content of the page (additional information, advertising...) must be identified by using the aside tag or the role=complementary.

Best practice

All these landmarks can rely on the ARIA attributes that are aria-label, aria-labelledby and aria-describedby to provide them with a more relevant accessible name.

Especially when several landmarks of the same type are present in the page, it may be important to give them a description via these ARIA attributes.

Example of a page with three navigation regions:


 <nav aria-label="Main Menu"> [...] </nav >
 <nav aria-label="Secondary Menu"> [...] </nav>
 <nav aria-label="breadcrumb trail"> [...] </nav>

More details on "The ARIA attributes that can save you" .

Another best practice is that all content must be included in the Landmarks / HTML5 structure tags. This allows users to not forget content that they would not have found.

Landmarks, users and assistive devices

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 his page without adding roles Landmarks.

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 really a best practice!