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

Several HTML sectioning elements automatically create ARIA landmark regions. So, in order to provide assistive technology users with a logical view of a page, it is important to understand the effects of using HTML sectioning elements. [[HTML-ARIA]] contains more information on HTML element role mapping.

Default landmark roles for HTML sectioning elements
HTML Element	Default Landmark Role
`aside`	`complementary`
`footer`	`contentinfo` when in context of the `body` element
`header`	`banner` when in context of the `body` element
`main`	`main`
`nav`	`navigation`
`section`	`region` when it has an accessible name using `aria-labelledby` or `aria-label`

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.

Step 3: Label areas

If a specific landmark role is used more than once on a page, provide each instance of that landmark with a unique label. 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 area begins with a heading element (e.g. h1-h6) it can be used as the label for the area using the aria-labelledby attribute.
If an area requires a label and does not have a heading element, provide a label using the aria-label attribute.
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

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

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.

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

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

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).
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 an accessible name (e.g. aria-labelledby, aria-label or title).

ARIA Technique

Use the role="form" to identify a region of the page; do not use it to identify every form field.

Examples

Form Landmark Example

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 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

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 identify content that named landmarks do not appropriately describe.

HTML Technique

The HTML section element defines a region landmark when it has an accessible name (e.g. aria-labelledby, aria-label or title).

ARIA Technique

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

Examples

Region Landmark Example

A search landmark contains a collection of items and objects that, as a whole, combine to create search functionality.

Use the search landmark instead of the form landmark when the form is used for search functionality.
If a page includes more than one search landmark, each should have a unique label (see Step 3 above).

HTML Technique

There is no HTML element that defines a search landmark.

ARIA Technique

The role="search" attribute defines a search landmark.

Examples

Search Landmark Example