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

HTML5 sectioning elements
HTML5 element Default landmark role
<headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.> banner
<nav> navigation
<main> main
<aside> complementary
<footer> contentinfo

Note that older browsers (like IE11) and assistive technologyAssistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. https://en.wikipedia.org/wiki/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 W3CW3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/. ARIA landmark example page. You can also review the WordPress theme accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/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

A basic example of page structure can look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Semantic HTML</title>
    <meta charset="utf-8">
  </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

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

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

With those aria-label attributes, screen readers will 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 landmark names like “navigation” in youraria-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 headerfooterbanner and ContentInfo landmarks respectively.

Top ↑

Resources

Last updated: