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