What landmarks are

How it works

Landmarks are regions of a page that assistive technology recognises as such. HTML has its own elements for them:

• header for the top with logo and search,
• nav for navigation menus,
• main for the actual content,
• aside for supporting content next to it,
• footer for the bottom with legal notice and contact.

A screen reader lists these regions and jumps into them at a keystroke. The most important is main: it lets you skip the header and menu that are the same on every page and land on the content. Without main you have to work through the same navigation again on every page.

WCAG 2.2 asks in success criterion 2.4.1 for a way to bypass repeated blocks. Landmarks are one such way; a “Skip to content” link at the very top is another, and it also helps keyboard users who don't use a screen reader.

What matters

• Exactly one visible main. It wraps the content that sets this page apart from others. Header, navigation and footer come before and after it, not inside.
• No second main. Two visible main elements, say from nested templates, confuse more than they help. Another one is only allowed when it is hidden with hidden.
• Several navigations with names. If there is a main menu and a footer menu, an aria-label tells them apart: <nav aria-label="Main menu">.
• Elements rather than roles. <div role="main"> works, but the main element is simpler and equivalent.

A skeleton looks like this:

<body>
  <a href="#content">Skip to content</a>
  <header>…</header>
  <nav aria-label="Main menu">…</nav>
  <main id="content">…</main>
  <footer>…</footer>
</body>

How to set it up

Landmarks live in the page skeleton all pages share, that is in the theme or layout template, not in the content of individual pages. In WordPress block themes you set the HTML element of a Group block in the site editor under “Advanced”, for example main. In classic themes and custom templates whoever maintains the theme changes it, usually your agency, in one place for all pages.