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.
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.
Your blog may also have supporting content such as:
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 ARIA landmarks is straightforward using HTML semantic tags.
The code snippet below demonstrates how you can use the
<aside />, and
<nav /> landmarks discussed above in your blog's HTML.
1<body> 2 <nav> 3 <ul> 4 <li><a href="/top-articles">Top Articles</a></li> 5 <li><a href="/about-me">About me</a></li> 6 <li><a href="/archive">Archive</a></li> 7 </ul> 8 </nav> 9 <main> 10 <h1>Using Landmarks to Make Your Website Screen Reader-Friendly</h1> 11 <p>...</p> 12 <p>...</p> 13 <p>...</p> 14 <p>...</p> 15 <p>...</p> 16 </main> 17 <aside aria-label="related articles"> 18 <ul> 19 .... 20 </ul> 21 </aside> 22 <aside aria-label="page actions"> 23 <h2>Is this article helpful?</h2> 24 <button aria-label="up vote" onClick="upVote()">+</button> 25 <button aria-label="down vote" onClick="downVote()">-</button> 26 </aside> 27</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:
1complementary landmark page actions
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:
<nav />tags are the most important navigation roles you can add.
<main />tag, and it should not be nested in another landmark.