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 element if it is in the context of a body, footer, header or main element, or if the aside element has a label (see Step 3 below) in any context.

Note: The aside element will not create a complementary landmark region in the following contexts:

  • article
  • aside
  • nav
  • section
 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 a landmark region has a title provided by a heading element, the heading can label the region by referencing the heading with 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 the following contexts:
    • 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.

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 element.
  • The HTML aside element is not considered a complementary landmark when it is following contexts:
    • article
    • aside
    • nav
    • section

ARIA Technique

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

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 in the following contexts:
    • 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.

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.

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.

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.

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 a 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).

Assistive Technology Support

The following sections demonstrate how various popular assistive technologies support landmark navigation

JAWS Screen Reader for Windows

The following commands are available in the JAWS screen reader (since version 15) for navigating landmarks:

Command Action
Q Go to main landmark
R Go to next landmark
Shift+R Go to previous landmark
Insert+Control+R List of landmarks
Screen shot of list of landmarks in JAWS

NVDA Screen Reader for Windows

The following commands are available in NVDA screen reader (since version 2014.2) for navigating landmarks:

Command Action
D Go to next landmark
Shift+D Go to previous landmark
NVDA+F7 List of landmarks
Screen shot of list of landmarks in NVDA

VoiceOver Screen Reader for macOS

The following commands are available in VoiceOver screen reader for navigating landmarks:

Command Action
W (Quick Nav) Go to next landmark
Shift+W (Quick Nav) Go to previous landmark
Control+Option+U, then left or right arrow key to landmark list List of landmarks
Screen shot of list of landmarks in VoiceOver

ORCA Screen Reader for Linux/GNOME

The following commands are available in ORCA Screen reader for navigating landmarks:

Command Action
M Next landmark
Shift+M Previous landmark
Alt+Shift+M List of landmarks
Screen shot of list of landmarks in Orca

SkipTo.js Browser Extension

The SkipTo.js browser extensions implement the User Agent Accessibility Guidelines 1.0 requirement 9.9 Allow Structured Navigation. It does this by providing keyboard navigation to major landmarks and headings on any web page. The keyboard shortcut to open the "Skip To Content" menu is alt + 0 on Windows/Linux and option + 0 on Mac keyboards.

The following table identifies additional single key shortcuts to navigate headings and landmarks. The single key commands are similar to the navigation commands found in screen readers.

Command Action
r Next landmark
shift+r Previous landmark
h Next heading
shift+h Previous heading
m Next Main landmark
n Next Navigation landmark
c Next Complementary landmark
1 Next H1 heading
2 Next H2 heading
3 Next H3 heading
4 Next H4 heading
5 Next H5 heading
6 Next H6 heading

Links to extensions:

Screen shot of SkipTo.js menu of major landmarks and Headings

Read More

Tools

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