# ARIA Landmark roles and HTML5 implicit mapping

DevFeed: [ARIA Landmark roles and HTML5 implicit mapping](<https://devfeed.tech/articles/aria-landmark-roles-and-html5-implicit-mapping-9372.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/aria-landmark-roles/>)

Author: Erik Runyon

Published: 2013-01-14T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [aria](<https://devfeed.tech/topics/aria.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [HTML5](<https://devfeed.tech/topics/html5.md>), [html elements](<https://devfeed.tech/topics/html-elements.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [aria](<https://devfeed.tech/tags/aria.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [html5](<https://devfeed.tech/tags/html5.md>), [internet-explorer](<https://devfeed.tech/tags/internet-explorer.md>), [post](<https://devfeed.tech/tags/post.md>), [support](<https://devfeed.tech/tags/support.md>)

## AI overview

This article explains how ARIA landmark roles help assistive technology users orient themselves and navigate websites or applications. It covers common landmarks such as banner, search, main, navigation, and contentinfo, and explains how HTML5 elements can provide many of these landmarks implicitly.

## Source excerpt

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 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. search 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. 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 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 Role HTML Element banner