Landmarks

Estimated reading time: ( words)

Summary: ARIA landmarks allow you to mark important parts of your web page, allowing adaptive technology users to easily move from one part of your page to another. All content on the page should be contained inside a landmark.

The most common available landmarks are:

  • banner
  • navigation
  • main
  • contentinfo
  • search

The following table lists the common roles, HTML5 tags, and notes on each landmark.

Role HTML 5 Tag Notes
banner header Site-oriented content of each page. Usually only one per page.
navigation nav Collection of links/buttons to navigate the site or page. Can have multiple per page.
main main Main content of the web page. Required for each a page. Almost always only one per page.
contentinfo footer Footer information. Must retain its meaning when separated from the main content.
search   A search tool.

Landmarks can be implement on your web page two ways. The first method is to use the HTML 5 tag:

<header><img src=”Our_main_logo” alt=””>Our fabulous site</header>

The other method is to use the ARIA role attribute:

<div role=”banner”><img src=”Our_main_logo” alt=””>Our fabulous site</div>

 

Did you find what you were looking for?

Related articles

Get help

Submit your accessibility question for a personal response, and we'll use your question to improve the content of this website.