Landmarks

ARIA Landmarks paired with their HTML5 equivalents help define the landmark regions of a page making it more semantic and easier to navigate.

The Problem

There are cases where there's no appropriate HTML5 sectioning element or the element alone is not enough to fully define a landmark.

The Solution

ARIA Landmark roles and labels can assist in defining and clarifying landmarks that HTML5 sectioning elements alone cannot.

Live Examples

Before illustrates the problem, After illustrates the solution. Click the header to see it larger in a modal.

Code Comparison

Code diff between the before and after examples above to show the changes necessary. To copy the final source click on the 'after' path link before the diff.

source

Comparing /examples/aria/landmarks/before/index.html to /examples/aria/landmarks/after/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Accessibility Solutions - ARIA - Landmarks</title>
    <link rel="stylesheet" href="../../../presentation.css" />
    <link rel="stylesheet" href="landmarks.css" />
  </head>
  <body id="top">
    <header role="banner">
      <a href="#main" class="skip-link sr-only sr-only-focusable"
        >Skip to main content</a
      >
      <nav role="navigation">
        <ul>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Architecto</a></li>
          <li><a href="#">Quas</a></li>
          <li><a href="#">Nobis</a></li>
        </ul>
      </nav>
      <form class="search" role="search">
        <input type="search" aria-label="Search" />
        <button type="submit">Search</button>
      </form>
    </header>
    <main role="main" id="main">
      <h1 id="example-h1">ARIA Landmark Examples</h1>
      <p role="complementary"aside>
        Building on the example in the Navigation &rarr; Landmarks page, this
        source code illustrates ways to add additional landmarks to a page
        beyond sectioning elements.
      </paside>
      <p>
        Key highlights of changes from <strong>before</strong> to
        <strong>after</strong>:
      </p>
      <ul>
        <li>
          Now that HTML5 Sectioning Elements are widely supported, adding an
          ARIA <code>role</code> to them is duplicative.
        </li>
        <li>
          The search form has an available ARIA <code>role</code> that doesn't
          have a native HTML5 equivalent so adding <code>role="search"</code> is
          appropriate for the search form in the header.
        </li>
        <li>
          Whenever a landmark role (like <code>&lt;nav></code> in this example)
          is used more than once on a page, provide each instance of that
          landmark with a unique <code>aria-label</code>. Don't add the role to
          the <code>aria-label</code>, it'll be read twice. For example an
          aria-label of <strong>Footer Navigation</strong> would read as
          <strong>"Footer Navigation: Navigation"</strong> by screen readers.
        </li>
      </ul>
      <blockquote>
        <a
          href="https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/#x2-1-no-aria-is-better-than-bad-aria"
          >No ARIA is better than Bad ARIA</a
        >. Be sure to take the overall context into account before adding
        additional roles and landmarks.
      </blockquote>
    </main>
    <footer>
      &copy; Copyright Information makes it look official

      <nav role="navigationaria-label="Footer">
        <ul>
          <li><a href="#">Accusamus dolore</a></li>
          <li><a href="#">Tenetur corporis</a></li>
          <li><a href="#">Atque fuga</a></li>
        </ul>
      </nav>
    </footer>
  </body>
</html>

styles

Comparing /examples/aria/landmarks/before/landmarks.css to /examples/aria/landmarks/after/landmarks.css

footer {

  background-color: #eee;

  border-top: 1px solid #999;

  padding: 1em;

  text-align: center;

}



header {

  align-items: center;

  border-bottom: 1px solid #999;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}



main {

  padding: 1em;

}



nav ul {

  list-style: none;

  margin: 0;

  padding: 0;

}



nav li {

  display: inline-block;

  padding: 1em;

}



.search {

  padding: 1em;

}



.skip-link:focus {

  left: 0;

  line-height: 1;

  padding: 10px;

  position: absolute;

  top: 0;

}