Using Landmarks to Make Your Website Screen Reader-Friendly

In this guide, you will learn about how to use ARIA Landmarks to convey the structure of your web page to assistive technologies like screen readers.

Sep 15, 2020 • 5 Minute Read

Subscribe to the newsletter

Introduction

Modern website designs have become increasingly complex with multiple panes, headers, footers in addition to the main content itself. Sighted users can rely on visual conventions such as shadows, borders, and spacing to easily navigate these complex designs. Users that are visually impaired or blind rely on screen readers and keyboard navigation to quickly discover the content on a webpage. However, screen readers can only facilitate this user experience if webpages contain the appropriate markup.

In this guide, you will learn about how to use ARIA Landmarks effectively and concisely to convey the structure of your web page to assistive technologies like screen readers. Screen readers have hotkeys to cycle through the different landmarks on a page, so placing them thoughtfully in your webpages can make a big difference for the user experience of your website. Throughout this guide, we will use a blog as an example to illustrate how different landmark roles should be used. We will begin by introducing the most commonly used landmark roles and then put it all together in an HTML document outline.

The Main Landmark Role

When a user navigates to a webpage on your blog, perhaps by referral from a Google search result, they likely want to read a blog post itself. However, for branding and consistency purposes, you may have a header, navigation links, a sidebar, and maybe a headshot displayed before the main content of the page. You do not want to force screen-reader users to tab through all this before they can get to the article. The content that is repeated on all pages of your blog should be structurally demarcated from the main content, i.e., the article itself. This is the intended use for the main landmark role—it indicates the section of the page that represents the blog article.

The main landmark role is identified by the <main /> HTML 5 semantic tag.

The Navigation Landmark Role

Once a user is done reading their first article on your blog, they may be curious what other interesting articles your blog contains. The navigation role is used to identify a set of links. This landmark can be nested inside another landmark. Your blog may use navigation landmarks in the following way:

To identify that a section is a breadcrumb so that users can check what part of the hierarchy they are in and navigate up
To highlight a group of links in your blog's header, such as "Top Articles", "About Me" and "Archive"

The navigation role is identified by the <nav /> HTML 5 semantic tag.

The Complementary Landmark Role

Your blog may also have supporting content such as:

Page actions that allow users to comment and like or dislike particular articles
A list of links to related articles

These two sections are examples of complemetary content and can be identified in HTML by the <aside /> HTML 5 semantic tag. These sections support the blog article, but are not the main content itself.

Using HTML Semantic Elements in your Page to Identify Landmarks

Using ARIA landmarks is straightforward using HTML semantic tags. The code snippet below demonstrates how you can use the <main />, <aside />, and <nav /> landmarks discussed above in your blog's HTML.

      <body>
  <nav>
    <ul>
      <li><a href="/top-articles">Top Articles</a></li>
      <li><a href="/about-me">About me</a></li>
      <li><a href="/archive">Archive</a></li>
    </ul>
  </nav>
  <main>
    <h1>Using Landmarks to Make Your Website Screen Reader-Friendly</h1>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </main>
  <aside aria-label="related articles">
    <ul>
       ....
    </ul>
  </aside>
  <aside aria-label="page actions">
    <h2>Is this article helpful?</h2>
    <button aria-label="up vote" onClick="upVote()">+</button>
    <button aria-label="down vote" onClick="downVote()">-</button>
  </aside>
</body>
    

Note that there are two <aside /> HTML tags. In order to help screen-reader users quickly distinguish the two landmarks, you can also add aria-label to name these sections. When they are labeled, the screen reader NVDA will read aloud:

      complementary landmark page actions

Conclusion

In this guide, you learned about main, complementary, and navigation landmarks. These are the primary landmarks that most web page designs should use. Adding the appropriate HTML semantic tags communicates the structure of your webpage to assistive technologies.

As a final note, you should remember:

The <main /> and <nav /> tags are the most important navigation roles you can add.
Avoid heavily nesting your landmarks. There should only be one <main /> tag, and it should not be nested in another landmark.
Use landmarks thoughtfully. If your website has more than 10 landmarks, you may need to rethink the design of your website.