On this page


People who use screen readers may listen to a list of landmarks as one strategy when they encounter a new web page. Landmarks provide quick access to the sections of a web page. All content should be contained within landmarks, and landmarks with the same role must have unique accessible names to disambiguate from each other. For example; aria-label=”Global menu” and aria-label=”Page menu”. Complementary landmarks must be at the top-level, not nested within other landmarks.

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

What is expected

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

The eight ARIA landmark roles are:

  • role=”banner”
  • role=”navigation” (e.g., a menu)
  • role=”main” (the main content of the page)
  • role=”complementary” (e.g., a sidebar)
  • role=”contentinfo” (meta data about the page, e.g., a copyright statement)
  • role=”search”
  • role=”form”
  • role=”application” (a web application with its own keyboard interface)

If a role is used more than once on a page, it should have an aria-label to be able to distinguish between them (e.g., aria-label=”Global menu” and aria-label=”Page menu”)

If you are using the IU Framework, it uses landmarks. You should apply a Main landmark to the most important chunk of each page. It’s weird and disconcerting to people who use assistive technology to find landmarks in the page, but there is no Main landmark.

Who is impacted

Experienced screen reader users are the ones who are most impacted by this. Their screen reader will present a list of the landmarks present in a web page, and will permit them to navigate to a particular landmark.

What to check for

That all rendered content which appears in the browser viewport is contained within a landmark element. Be certain that landmarks, when they may be nested, are nested correctly (e.g., complementary landmarks should be top-level, not contained within other top-level landmarks, such as main.)

How to check this

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