Landmarks and web page accessibility

• Overview
• General guidelines
• Applying landmarks
• Affected audiences
• Evaluate landmarks
  • What to check
  • How to check

---

Overview

Landmarks are an essential feature of web accessibility that provide quick access to the different sections of a web page. It is important to include landmarks in your website design to ensure that all users can access content easily and efficiently.

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.

Applying landmarks

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. Ensure that the landmark accurately reflects the primary purpose of the page.

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, it is best to not define a role.

Affected audiences

People who are experienced at using screen readers are most affected by landmarks. The screen reader will present the user list of landmarks present on 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.

One tool that can help identify landmarks is WAVE from WebAIM.