ARIA Landmarks

ARIA landmark roles provide a method for screen reader users to navigate structural regions of a site. By default many HTML5 elements define ARIA landmark roles which identify these regions.

All content should be inside these semantically meaningful elements so content is not missed by the user.

Most common landmark elements Most common landmark elements

HTML5 sectioning elements
HTML5 element Default landmark role
<header> banner
<nav> navigation
<main> main
<aside> complementary
<footer> contentinfo

Note that older browsers (like IE11) and assistive technology combinations don’t allways recognize HTML5 elements and map them to the correct landmark role. In these cases you can add the role manually, like this: <header role="banner">.

More information can be found at the W3C ARIA landmark example page. You can also review the WordPress theme accessibility guidelines, as WordPress themes are required to use landmark roles in order to apply the accessibility-ready tag.

Top ↑

Good example of HTML5 sectional elements Good example of HTML5 sectional elements

A basic example of page structure can look like this:

<!DOCTYPE html>
<html>
<head>
<title>Semantic HTML</title>
</head>
<body>

  <header>
    <img src="logo.png" alt="We the people">
  </header>

  <nav>
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/semantics">Semantics</a></li>
    </ul>
  </nav>

  <main>
    <article>
      <h1>Semantic HTML</h1>
      <p>That wasn’t so hard.</p>
    </article>
  </main>

  <aside>
    <p>Additional information.</p>
  </aside>

  <footer>
    <p>Information about the site.</p>
  </footer>
</body>
</html>

Using this markup screen reader users can navigate using mapped ARIA landmark roles. For example, in VoiceOver the landmark list will look like this:

List of aria landmarks in VoiceOver: banner, navigation, main, complementary

Note that the contentinfo role is missing. This is because of a VoiceOver bug. Life isn’t perfect. You can add this role manually: <footer role="contentinfo">.

Top ↑

Notes Notes

If the same role appears more than once in a page, there should be an aria-label attribute on that element. This will distinguish different landmarks. Navigation is the most common example:

<nav aria-label="Top">
<nav aria-label="Bottom">

Now screen readers can announce Top navigation and Bottom navigation, rather than navigation and navigation.

Top and bottom navigation added using aria labels

Note that the word navigation is already announced by assistive technologies. Therefore avoid using “navigation” in your aria-label content.

<header> and <footer> elements can also be inside other elements like <article>. But only elements which are direct descendants of the body tag will be exposed as header and footer, and banner and ContentInfo landmarks respectively.

Top ↑

Resources Resources