Foundations: landmarks

Posted on Friday, 18 March 2022 by Léonie Watson

Most websites have common areas of content like a header and footer, a main content area, and one or more navigation blocks. Sighted people can identify these areas based on the way they're styled and the content they contain, but people who are blind cannot do that quite as efficiently. Landmarks, like headings and lists, offer screen reader users a more comparable experience for identifying and navigating between these areas of content.

The Cambridge English Dictionary describes a landmark like this:

A building or place that is easily recognised, especially one that you can use to judge where you are.

For example, if you were in London and you could see the tower that contains Big Ben, you would know that you were in Westminster.

Landmarks on the web do the same thing. When you use a screen reader to navigate into an area with a landmark, the screen reader tells you what the landmark is, and you can use that information to work out where you are and what that area of the page is all about.

Common landmarks

These are the areas of content most often marked up as landmarks:

Header (banner)
Footer
Main content
Navigation
Complementary content
Search

The TetraLogical About us page showing landmarks for banner (header), navigation and main

Planning landmarks

Start thinking about landmarks when you begin sketching out designs for your website. As common areas like the header and footer, main content area, navigation, and search start to take shape, annotate your designs to indicate that they should be implemented as landmarks.

If the designs include areas of distinctly styled content that complements the main content, include them in your annotations too.

Implementing landmarks

You can use HTML elements to provide most common landmarks. The exception is the search landmark, which can only be provided using ARIA. If you cannot use the HTML elements you need, you can use ARIA to create them instead.

Header landmark

HTML: Use the <header> element; Note that if the <header> element is inside an <article>, <aside>, <main>, <nav>, or <section> element, the landmark should not be exposed to screen readers
ARIA: Use role="banner" on the element that contains the header content; Note that if the container element is inside an <article>, <aside>, <main>, <nav>, or <section> element, the landmark should not be exposed to screen readers

HTML: Use the <footer> element; Note that if the <footer> element is inside an <article>, <aside>, <main>, <nav>, or <section> element, the landmark should not be exposed to screen readers
ARIA: Use role="contentinfo" on the element that contains the footer content; Note that if the container element is inside an <article>, <aside>, <main>, <nav>, or <section> element, the landmark should not be exposed to screen readers

Main landmark

HTML: Use the <main> element
ARIA: Use role="main" on the element that contains the main content

HTML: Use the <nav> element
ARIA: Use role="navigation" on the element that contains the navigation

Complementary landmark

HTML: Use the <aside> element
ARIA: Use role="complementary" on the element that contains the complementary information

Search landmark

HTML: There is no HTML element with a built-in search landmark
ARIA: Use role="search" on the element that contains the search

Using landmarks

Every screen reader has at least one command or gesture for navigating between landmarks.

Screen readers on Windows and macOS

Narrator (Windows): Use Capslock + Space to turn on scan mode, then use d to move to the next landmark or Shift + d to move to the previous landmark
NVDA (Windows): Use d to move to the next landmark or Shift + d to move to the previous landmark
JAWS (Windows): Use r to move to the next landmark or Shift + r to move to the previous landmark
VoiceOver (macOS): Use Control, Option + u to open the rotor, use Left arrow or Right arrow to navigate to the list of available landmarks, then use Up arrow or Down arrow to move to the desired landmark

Screen readers on Android and iOS

TalkBack (Android): Swipe up and right in a single gesture, navigate the options until you hear "landmarks", then swipe left or right to find the landmark you want
VoiceOver (iOS): Rotate two fingers on the screen until you hear "landmarks", then swipe up or down to find the landmark you want

Tips for creating landmarks

Try to put all content inside a landmark area, it helps make sure screen reader users don't accidentally miss something
Use the visual design of your website to guide your choice of landmarks
Consider headings and landmarks together, these should complement each other so parts of the page are discoverable, for example, try and position the heading level 1, <h1>, immediately after the start of the main landmark as this is a logical place to find it

WCAG 2.1 Success Criterion 1.3.1 Info and Relationships (Level A)

More information

For more information about the Web Content Accessibility Guidelines, read our WCAG primer.