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:

banner

Typically the “header” of your page, containing the name of the site/application along with other globally available content.

search

Use on the primary search form. Often, but not always, found within a `banner`.

main

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

navigation

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 straight forward process. Simply add the role attribute referencing the appropriate landmark value. For example:

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

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>
Warning: The banner role is unnecessary for element header.
<header class="site-header" role="banner">...
A snippet of the warning output from the Nu HTML Validator.

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

Landmark Role HTML5 Structural 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)
search none

The majority of modern browsers (except IE) 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, as of July 2018, Safari and VoiceOver on macOS High Sierra do not properly expose the contentinfo role from a footer element. 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.

Additional references

For more information about landmarks and other concepts mentioned in this article, you can check out the following resources:

Edit on GitHub