Aria Landmarks are used to define the layout and organization of a website. They mainly help users of assistive technologies, including users who can only use a keyboard when browsing a site (users who cannot use a mouse or trackpad); as well as users of screen readers, creating a “table of contents” for a page that allows a user to jump to the relevant sections instead of listening to all of the items one by one.

Typically, users who rely on keyboard-only will navigate a website by clicking tab to jump from link to link, or to pre-defined tab-to areas (defined by the developer). Skip-links are used to help them skip redundant areas of content. For keyboard-only users utilizing Assistive technologies combined with landmark functionality, landmarks function as a “menu” of skip-links and allow easy and quick access to all areas of a website.

Used to aid in compliance of the following WCAG guidelines:

  1. Success Criterion 2.4.1 (Bypass Blocks)

  2. Info and Relationships 1.3.1

List of Landmarks

Landmark

HTML5 element(s)

Used for

Banner

role=”banner”

<header> *

Typically contains site-wide “branding” content, located at the top of all of the pages in the website.

Example: Area of the page containing the logo, site-wide tagline or title/heading, or a site-wide search bar.

Complementary

role=”complementary”

<aside>

Typically located beside the main content but contain separate information.

Examples: Callouts, Related Content, Sidebars that aren’t navigation,

“About the Author”, Bios, etc.

Contentinfo

role=”contentinfo”

<footer> *

Typically located at the bottom of the page, used to contain privacy information, footer navigation, and copyright information.

Use only one “contentinfo” or <footer> on a page.

Form

role=”form”

<form> **

Designating a container of items (fields, text, buttons, etc.) as a form.

The HTML5 element <form> should be used in lieu of role=”form” for all forms whenever possible.

Use <form role=”search”> for forms that are used for searching.

Main

role=”main”

<main>

Defining the main or primary content of the page. Where the meat of the page lies.

When landmarks are used, there should be at least 1 “main” landmark.

Navigation

role=”navigation”

<nav>

Designating a set of links as navigation.

Examples: Main site navigation, individual page navigation, certain quick links menus, etc.

Region

role=”region”

<section> **

For important pieces of content that users need access to that cannot be defined by the other landmarks.

Use sparingly and add labels - See Important rules below.

*Element is NOT a landmark when placed under one of the following HTML elements:

  • article

  • aside

  • main

  • nav

  • section

**Element is a landmark ONLY when given a unique name by using one of the following accessibility attributes:

  • aria-label

  • aria-labelledby

  • Title

Important rules when using Landmarks

  • If a landmark is used to define one space, landmarks should be used to define all the spaces.

    • If the user encounters one landmark, they may assume all of the content is in landmarks and skip important pieces of information.

  • Use labels

    • If using a landmark type more than once, use the “aria-label” or “aria-labelledby” attribute to specify a unique name for the landmark so that the user does not lose their place on the page.

  • Use Sparingly

    • For screen readers, the presence of too many landmarks can be burdensome for users. Use a few landmarks to define large, general, areas and don’t define/label every piece of content on a webpage.

  • HTML5 elements

    • Some HTML5 elements have implicit landmark roles predefined by many assistive technologies, so developers and designers should be careful when using these elements if they don’t intend to use landmarks. They should also be aware to prevent “over landmarking” of the website.


Further reading

Did this answer your question?