Landmarks

Using HTML elements to define the landmark regions of a page makes it more semantic and easier to navigate.

The Problem

Using generic containers instead of appropriate semantically rich native HTML elements.

The Solution

Instead, consider using a semantic element to add landmarks to the page and make it easier to navigate.

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/navigation/landmarks/before/index.html to /examples/navigation/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 - Navigation - Landmarks</title>
    <link rel="stylesheet" href="../../../presentation.css" />
    <link rel="stylesheet" href="landmarks.css" />
  </head>
  <body>
    <diheader>
      <nav class="header-nav">
        <ul class="navid="menu">
          <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>
      </dinav>
    <div class="/header>
    <main">
      <p>
        Lorem ipsum dolor sit amet consectetur <a href="#">adipisicing elit</a>.
        Velit ea optio est adipisci beatae alias porro voluptatibus culpa dicta
        veniam, esse quidem nihil odio voluptatem error tempora nostrum minima
        magni et. Deleniti possimus corrupti mollitia cupiditate totam facere
        molestias, sunt amet exercitationem inventore odio veritatis eaque
        doloribus esse tenetur officia, odit hic obcaecati harum nostrum
        blanditiis ratione, fuga in? Dolorem tempore nemo saepe et tenetur nobis
        iste. Atque sequi a aliquid corrupti, ut fugit magni, laboriosam quo
        quidem fuga incidunt nemo modi consequatur distinctio quisquam provident
        impedit veritatis quam corporis recusandae. Amet delectus voluptatem
        ipsum earum debitis cupiditate iure, libero perferendis non eius
        explicabo porro minus temporibus nostrum corrupti iste. Accusamus,
        pariatur repudiandae!
      </p>
    </divmain>
    <div class="footer">&copy; All rights reserved</div>
footer>
    <script src="landmarks.js"></script>
  </body>
</html>

styles

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

.footer {
  background-color: #eee;
  border-top: 1px solid #999;
  padding: 1em;
  text-align: center;
}

.header {
  border-bottom: 1px solid #999;
  display: block;
}

.main {
  padding: 1em;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline-block;
  padding: 1em;
}