Skip to content

Landmark Regions

Landmark Regions

Introduction

ARIA landmark roles provide a powerful way to identify the organization and structure of a web page. By classifying and labelling sections of a page, they enable structural information that is conveyed visually through layout to be represented programmatically. Screen readers exploit landmark roles to provide keyboard navigation to important sections of a page. Landmark regions can also be used as targets for "skip links" and by browser extensions to enhanced keyboard navigation.

This section explains how HTML sectioning elements and ARIA landmark roles are used to make it easy for assistive technology users to understand the meaning of the layout of a page.

HTML Sectioning Elements

The following HTML sectioning elements create ARIA landmark regions.

Landmark roles generated by HTML sectioning elements
HTML Element Implied Landmark Role
aside if it is in the context of a body or main element complementary
aside if it has a label (see Step 3 below) and is in the context of an article, aside, nav or section element complementary
footer if it is in the context of a body element contentinfo
form if it has a label (see Step 3 below) form
header if it is in the context of a body element banner
main main
nav navigation
section if it has a label (see Step 3 below) region
search search

General Principles of Landmark Design

Including all perceivable content on a page in one of its landmark regions and giving each landmark region a semantically meaningful role is one of the most effective ways of ensuring assistive technology users will not overlook information that is relevant to their needs.

Step 1: Identify the logical structure

  • Break the page into perceivable areas of content which designers typically indicate visually using alignment and spacing.
  • Areas can be further defined into logical sub-areas as needed.
  • An example of a sub-area is a portlet in a portal application.

Step 2: Assign landmark roles to each area

  • Assign landmark roles based on the type of content in the area.
  • banner, main, complementary and contentinfo landmarks should be top level landmarks.
  • Landmark roles can be nested to identify parent/child relationships of the information being presented.
  • Note that wrapping the content of a modal dialog in a landmark region is unnecessary. A landmark that wraps modal content cannot provide any benefit to users because it is not perceivable unless the modal is open. In addition, when a modal is open, a landmark containing its content is superfluous because the modal itself is a container that provides both a name and boundaries.

Step 3: Label landmarks

  • If a specific landmark role requires a label or is used more than once on a page, provide each instance of that landmark with a unique and descriptive label. The label should be short and help people understand the content in the region.
  • There is one rare circumstance where providing the same label to multiple instances of a landmark can be beneficial: the content and purpose of each instance is identical. For example, a large search results table has two sets of identical pagination controls -- one above and one below the table, so each set is in a navigation region labelled Search Results. In this case, adding extra information to the label that distinguishes the two instances may be more distracting than helpful.
  • If a landmark is only used once on the page it may not require a label. See Landmark Roles section below.
  • If an landmark region begins with a heading element (e.g. h1-h6) it can be used as the label for the region using aria-labelledby.
  • If a form landmark region has a fieldset element that encapsulates all the controls in the form, the corresponding legend element can be used as the label for the region using aria-labelledby.
  • If a landmark requires a label and does not have a heading element, provide a label using the aria-label attribute. Note: While the title attribute can also be used to provide a label, it is not considered a best practice and is discouraged.
  • Do not use the landmark role as part of the label. For example, a navigation landmark with a label "Site Navigation" will be announced by a screen reader as "Site Navigation Navigation". The label should simply be "Site".

Landmark Roles

Banner

A banner landmark identifies site-oriented content at the beginning of each page within a website. Site-oriented content typically includes things such as the logo or identity of the site sponsor, and site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.

  • Each page may have one banner landmark.
  • The banner landmark should be a top-level landmark.
  • When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one banner landmark.
  • If a page includes more than one banner landmark, each should have a unique label (see Step 3 above).

HTML Techniques

  • The HTML header element defines a banner landmark when its context is the body element.
  • The HTML header element is not considered a banner landmark when it is descendant of any of following elements (see HTML Accessibility Mappings):
    • article
    • aside
    • main
    • nav
    • section

ARIA Techniques

If the HTML header element technique is not being used, a role="banner" attribute should be used to define a banner landmark.

Examples

Banner Landmark Example

Complementary

A complementary landmark is a supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.

  • complementary landmarks should be top level landmarks (e.g. not contained within any other landmarks).
  • If the complementary content is not related to the main content, a more general role should be assigned (e.g. region).
  • If a page includes more than one complementary landmark, each should have a unique label (see Step 3 above).

HTML Technique

  • Use the HTML aside element to define a complementary landmark when its context is the body or main element.
  • Use the HTML aside element with a label (see Step 3 above) to define a complementary landmark when its context is an article, aside, nav or section element.

ARIA Technique

If the HTML aside element technique is not being used, use a role="complementary" attribute to define a complementary landmark.

Examples

Complementary Landmark Example

Contentinfo

A contentinfo landmark is a way to identify common information at the bottom of each page within a website, typically called the "footer" of the page, including information such as copyrights and links to privacy and accessibility statements.

  • Each page may have one contentinfo landmark.
  • The contentinfo landmark should be a top-level landmark.
  • When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one contentinfo landmark.
  • If a page includes more than one contentinfo landmark, each should have a unique label (see Step 3 above).

HTML Techniques

  • The HTML footer element defines a contentinfo landmark when its context is the body element.
  • The HTML footer element is not considered a contentinfo landmark when it is descendant of any of following elements (see HTML Accessibility Mappings):
    • article
    • aside
    • main
    • nav
    • section

ARIA Technique

If the HTML footer element technique is not being used, a role="contentinfo" attribute should be used to define a contentinfo landmark.

Examples

Contentinfo Landmark Example

Form

A form landmark identifies a region that contains a collection of items and objects that, as a whole, combine to create a form when no other named landmark is appropriate (e.g. main or search).

  • Use the search landmark instead of the form landmark when the form is used for search functionality.
  • A form landmark should have a label to help users understand the purpose of the form.
  • A label for the form landmark should be visible to all users (e.g. an h1-h6 element) or legend element.
  • If a page includes more than one form landmark, each should have a unique label (see Step 3 above).
  • Whenever possible, controls contained in a form landmark in an HTML document should use native host semantics:
    • button
    • input
    • select
    • textarea

HTML Techniques

The HTML form element defines a form landmark when it has a label (see Step 3 above).

NOTE: If the form uses a fieldset/legend to provide a grouping label for all the controls in the form, use the legend element as a landmark label by referencing it using aria-labelledby.

ARIA Technique

Use the role="form" with a label (see Step 3 above) to identify a region of the page with a set of form controls; do not use it to identify every form field.

Examples

Form Landmark Example

Main

A main landmark identifies the primary content of the page.

  • Each page should have one main landmark.
  • The main landmark should be a top-level landmark.
  • When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark.
  • If a page includes more than one main landmark, each should have a unique label (see Step 3 above).

HTML Technique

Use the HTML main element to define a main landmark.

ARIA Technique

If the HTML main element technique is not being used, use a role="main" attribute to define a main landmark.

Examples

Main Landmark Example

Navigation

Navigation landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation.

  • If a page includes more than one navigation landmark, each should have a unique label (see Step 3 above).
  • If a navigation landmark has an identical set of links as another navigation landmark on the page, use the same label for each navigation landmark.

HTML Technique

Use the HTML nav element to define a navigation landmark.

ARIA Technique

If the HTML nav element technique is not being used, use a role="navigation" attribute to define a navigation landmark.

Examples

Navigation Landmark Example

Region

A region landmark is a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section.

  • A region landmark must have a label.
  • If a page includes more than one region landmark, each should have a unique label (see Step 3 above).
  • The region landmark can be used to identify content that named landmarks do not appropriately describe.

HTML Technique

The HTML section element defines a region landmark when it has an label (see Step 3 above).

ARIA Technique

If the HTML section element technique is not being used, use a role="region" attribute to define a region landmark with a label (see Step 3 above).

Examples

Region Landmark Example

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.