Landmarks

On this page:


Overview

When people who use screen readers encounter a new web page, they may listen to a list of landmarks to help them quickly understand the page's content and context. Landmarks provide quick access to the sections of a web page.

General guidelines

Keep the following information in mind when working with landmarks:

  • All site content should be contained within landmarks.
  • Landmarks with the same role must have unique accessible names to distinguish them from one other.
  • The banner, main, complementary, and contentinfo landmarks must be at the top level, not nested within other landmarks.
  • Each page should contain only one banner, main, and contentinfo landmark.

Expectation

All content in the body of a web page should be contained within an ARIA landmark.

The eight ARIA landmark roles are:

  • role="banner" or HTML <header>
  • role="navigation" or HTML <nav> (for example, a navigation menu for all of the content of a site)
  • role="main" or HTML <main> (the main content of the page)
  • role="complementary" or HTML <aside> (for example, a sidebar)
  • role="contentinfo" or HTML <footer> (metadata about the page, such as a copyright statement)
  • role="search"
  • role="form" or HTML <form> with label
  • role="region" (an important section of content not described by another role)

Apply a main landmark to the main content of each page. The main content is the primary purpose of the page. It is disconcerting and confusing to people who use assistive technology to find other landmarks on a page without a main landmark.

If you use a role more than once on a page, give it an aria-label so screen readers can distinguish between them. Landmark labels should not include the landmark name (for example, aria-label="site" and aria-label="section" for navigation).

HTML5 provides built-in landmark elements such as main, nav, aside, header, and footer. It is best to use those elements when authoring content. When using HTML5 elements, generally it is best to not define a role (although there are exceptions, to address shortcomings in specific browsers).

The IU Framework uses landmarks.

Affected audiences

People who are experienced at using screen readers are most affected by landmarks. The screen reader will present a list of landmarks present in a web page, and will permit them to navigate quickly to a particular landmark.

Evaluate landmarks

What to check

Make sure that all rendered content appearing in the browser is contained within a landmark element. Be certain that nested landmarks are nested correctly (for example, complementary landmarks should be top level, not contained within other top-level landmarks, such as main).

How to check

To check your landmarks:

  1. Identify content in the source code.
  2. Check that all rendered content is contained by a landmark element.

This is document aryt in the Knowledge Base.
Last modified on 2021-09-22 13:08:34.