Skip to content.

Quick tip

ARIA Landmark roles and HTML5 implicit mapping

By: Erik Runyon. Published: .

Table of Contents

ARIA Landmark Roles can be helpful to assistive device users, as they can be used to orient a user to, and easily navigate, your website or application. For a quick video demonstration, check out "How ARIA landmark roles help screen reader users", by Léonie Watson.

Landmark quick reference

The following are common landmark roles that tend to be useful on many pages:

Typically the primary “header” of your page, containing the name of the site/application along with other globally available content. It MUST be scoped to the body element, and not within another sectioning element, or the main of the document.

Use on the primary search form. Often, but not always, found within a banner. If you have multiple search landmarks in a document it would be good to provide them with unique accessible names to indicate how they differ.

main

Designates the primary content area of the current document. Only one main landmark should be exposed to users at a time.

Used to promote an area as a navigation. Combine with a unique aria-label to provide context of the navigation's purpose. e.g. <nav aria-label="primary">.

contentinfo

Typically the "footer" of your page that contains information about the parent document such as copyrights and links to privacy statements.

Implementing landmarks in your documents is a straightforward process. Simply add the role attribute referencing the appropriate landmark value. For example:

<div role="contentinfo">
  ...
</div>

HTML5 implicit mappings of Landmark roles

Before you start adding ARIA roles to your HTML elements, you should be aware that many of these landmarks will be natively conveyed by proper HTML usage. For example, the following markup snippet will produce a warning in modern HTML and accessibility automated checkers:

<header role="banner" class="site-header">
  ...
</header>

The following table outlines the different ARIA landmarks, and the HTML5 element they are associated with:

Landmark RoleHTML Element
banner<header>
(if not a child of a sectioning element or the main.)
complementary<aside>
contentinfo<footer>
(if not a child of a sectioning element or the main.)
form<form>
(if provided an accessible name via aria-label or aria-labelledby)
main<main>
(only use one per page)
navigation<nav>
region<section>
(if provided an accessible name via aria-label or aria-labelledby)
searchnone

The majority of modern browsers (except Internet Explorer) support these mappings. But it's always beneficial to run your own tests to ensure the appropriate landmark role is being appropriately exposed to assistive technology.

For example, there are still support gaps in browsers and screen readers for exposing some landmarks. When presented with situations like this, ignoring conformance warnings, and adding a redundant role to an element, may be preferred to not exposing the correct landmark information.

This post was last updated on by Scott O'Hara.

Further reading