probeo

Why does a page need a main landmark?

landmark-one-main page

The issue

A page without a main landmark gives screen reader and keyboard users no direct way to its content. Landmarks are how they skip the header and navigation, and the main landmark is the one they want most. Without it, every visit starts by moving through everything before the content.

The cause is usually a layout built from generic <div> elements, where the content area is a <div class="content"> rather than a <main>.

Scope

The rule passes when the page has at least one visible element with the main role: a <main> element or an element with role="main". It fails once per page when there is none. A <main> that is hidden doesn’t count.

This is a best-practice rule. It supports WCAG 1.3.1 and 2.4.1, and pairs with the rule that a page has at most one main landmark.

How to check you have it

  • In probeo: the page reports the landmark-one-main rule, “Document should have one main landmark”, with moderate impact.
  • By hand: view the page source and search for <main and role="main".
  • With a tool: a screen reader’s landmarks list, or the accessibility tree in Chrome or Firefox DevTools, shows a “main” entry when there is one.

The fix

Wrap the page’s primary content in a single <main> element.

The <main> should hold the content unique to this page, and leave out the site header, navigation, sidebars that repeat across pages and the footer. Change the existing content wrapper’s tag rather than adding another layer.

<!-- Before -->
<div class="content">…</div>

<!-- After -->
<main class="content">…</main>

Done when: each page has one visible <main> around its own content, and the check above comes back clean.

Do not

  • Do not put the header, navigation or footer inside <main>.
  • Do not add role="main" to an element that already is a <main>.
  • Do not hide the <main> element with hidden or display: none on any template.

FAQ

Is role=“main” on a div as good as a main element?

It satisfies the rule and is announced the same way. The <main> element needs no ARIA and is what current templates should use.

No. A skip link helps keyboard users, and landmarks help screen reader users move around the page. They solve overlapping problems and a page should have both. A missing skip link is covered by the bypass rule.

What goes in main on a page that is mostly navigation, such as a sitemap?

The list of links is that page’s content, so it goes in <main>. Only the parts repeated on every page stay outside.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.