probeo

Why should a page have only one main, banner and contentinfo landmark?

landmark-no-duplicate-main page

The issue

A page with two main landmarks, two banners or two contentinfo landmarks gives screen reader users two places that each claim to be the page’s content, its header or its footer. Jumping to “main” lands on one of them, and the user can’t tell from the landmark list which is the real one.

The cause is usually layout components that each bring their own <main>, <header> or <footer>: a modal or embedded widget with its own <main>, or a second site header or footer added by a template.

Scope

Three rules, one per landmark role:

  • landmark-no-duplicate-main: more than one visible element with the main role, <main> or role="main".
  • landmark-no-duplicate-banner: more than one visible element with the banner role.
  • landmark-no-duplicate-contentinfo: more than one visible element with the contentinfo role.

When a page has more than one, each of them is reported. Hidden elements are skipped. All three are best-practice rules, related to WCAG 1.3.1.

How to check you have it

  • In probeo: the page reports landmark-no-duplicate-main, “Document should not have more than one main landmark”; landmark-no-duplicate-banner, “Document should not have more than one banner landmark”; or landmark-no-duplicate-contentinfo, “Document should not have more than one contentinfo landmark”. Each has moderate impact.
  • By hand: view the page source and count <main, <header, <footer and any role="main", role="banner" or role="contentinfo".
  • With a tool: a screen reader’s landmarks list, or the accessibility tree in Chrome or Firefox DevTools, shows what the browser exposes. Compare it with the elements probeo reported.

The fix

Keep one site header, one main content area and one site footer per page, and change the tags on everything else.

A widget or modal shouldn’t bring its own <main>; use a <div> or a <section> with a label. Remove role="banner", role="main" and role="contentinfo" from anything other than the page’s own header, content and footer.

Done when: the page has at most one of each, and the check above comes back clean.

Do not

  • Do not give a nested component its own <main>.
  • Do not add role="banner" or role="contentinfo" to article or card headers and footers.
  • Do not hide the extra landmarks with aria-hidden; change the elements.

FAQ

Can a page have more than one navigation landmark?

Yes. These rules cover only main, banner and contentinfo. Several navigation landmarks are fine when each has its own label, which the landmark-unique rule checks.

What about a main element inside a dialog?

It is still a second main landmark while it’s in the page. Give the dialog’s content a <div> and leave the one <main> to the page.

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.