What Are WAI-ARIA Document Landmark Roles?

ARIA landmarks allow you to define key sections of a web page using code in a way that helps people using assistive technologies – such as screen reading technology.

Landmarks offer people using screen readers more efficient ways to navigate web pages – for example, by allowing them to jump to the main content of the page bypassing repeated elements like the navigation.

Landmarks also allow you to communicate an equivalent coded structure of the page to the structure communicated by the visual design and layout.

5 key landmarks roles

While there are 8 total document landmarks, we’re going to focus on the 5 most common here. The purpose of each role is to help people using assistive technology to navigate through content and to identify the different areas of the page.

While it is possible to manually add landmark roles to our HTML using the role attribute, HTML5 allows us to add these roles implicitly simply by using specific ‘HTML5 sectioning tags’ – this is now the recommended approach.

If you know you need greater backwards combability for your website, you can add robustness by supplementing the HTML5 tag with the explicit aria landmark role – for example <main role=”main”>. We’ll look at each role in more detail below.

Banner

role=”banner”

The banner role is typically used for an area of the page containing sitewide information. Usually, the banner area stretches the full width of the top of the page and includes the logo, main menu and site search.

The HTML5 element with the implicit banner role is <header>.

Contentinfo

role=”contentinfo”

The contentinfo role is used for an area containing further information about the page and/or website you are on. This often includes legal information, contact details and social media links. This area of a website template is commonly referred to as the footer.

The HTML5 element with the implicit contentinfo role is <footer>

Main

role=”main”

The main role is used for the primary content of a page. There should be at least one main landmark, including the main heading for the page (h1); generally, it is a unique landmark.

The main landmark often works well as the destination for ‘skip to content links’ these links allow sighted users navigating via keyboard alone to bypass the main navigation links to reach the main content more efficiently.

The HTML5 element with the implicit main role is <main>

Complimentary

role=”complimentary”

The complimentary role is used for an area containing content that is related to, but separate from, the main content topic. For example, an area with sidebars of related links or other content.

The HTML5 element with implicit complimentary role is <aside>

Navigation

role=”navigation”

This navigation role is used for areas of the page containing groups of navigational links. It can be used for the main website navigation – generally seen at the top of each page as well as secondary navigation such as pagination.

The HTML5 element with implicit navigation role is <nav>

3 top tips:

1. Use landmarks sparingly – just enough to accurately convey the structure but no more. Using too many can make it harder for people using assistive technologies to work out which section of the page is most relevant
2. Encourage people to include landmarks as annotations in their design files
3. If a page contains iframe elements, each iframe should contain either no main landmarks or just one

Labelling duplicate landmarks

A common issue we see in our accessibility audits is multiple landmarks of the same kind with no way to differentiate between them. For example, it’s common to have a <nav> tag from the main website navigation and another <nav> tag used lower down the page for pagination. These will both be communicated simply as ‘navigation’.

To make things clearer for people using assistive technology, add an aria-label attribute to each HTML element with a short description of the navigation purpose. For example:

<nav role=”navigation” aria-label=”main”>
    <ul>
        <li><a href=”/home”>Home</a></li>
        <li><a href=”/about”>About</a></li>
    </ul>
</nav>

<nav role=”navigation” aria-label=”pagination”>
    <ul>
        <li><a href=”/page1”>Page 1</a></li>
        <li><a href=”/page2”>Page 2</a></li>
    </ul>
</nav>

Further reading

To see more examples of ARA Landmarks, see the W3C ARIA Landmarks guidance.

How can we help?

While we’ve introduced the essential ARIA landmarks that can enhance your website’s accessibility, there’s much more beneath the surface.

Navigating the intricacies of accessibility and implementing these changes can be complex, but you don’t have to do it alone. Whether you’re just beginning to explore accessibility or looking to enhance your current efforts, our team is here to eliminate the guesswork and create a comprehensive plan to ensure your website is accessible and inclusive for all users. Contact us today to get started on your journey!