• June 1, 2025

Avoid Duplicate Main Landmarks

Rule ID: landmark-no-duplicate-main
Ruleset: axe-core 4.10
User Impact: Moderate
Guidelines: Deque Best Practice

How to Fix the Problem

To meet accessibility best practices, ensure that each page contains only one <main> landmark region. This landmark is intended to denote the primary content of a web page and must not be duplicated. If your page includes <iframe> elements, each iframe should either:

• Contain no main landmark at all, or

• Contain only one main landmark.

Steps to Fix:

1. Audit your HTML:

   • Confirm that only one <main> element exists per page.

   • If you are using ARIA, ensure that only one role="main" is applied.

2. For iframe usage:

   • If an iframe includes content with landmarks, ensure that it has no more than one role="main" or <main> element inside.

3. Use HTML5 and ARIA landmarks together:

   • While HTML5 elements (<main>, <nav>, <header>, <footer>) are increasingly well supported, combining them with their ARIA equivalents (role="main", role="navigation", etc.) improves compatibility with various screen readers.

4. Example of Correct Structure:

   html

   KopierenBearbeiten

   <header role="banner">
<p>Put company logo, etc. here.</p>
</header><nav role=“navigation”>
   <ul>
   <li>Put navigation here</li>
   </ul>
   </nav>

   <main role=“main”>
   <p>Put main content here.</p>
   </main>

   <footer role=“contentinfo”>
   <p>Put copyright, etc. here.</p>
   </footer>

   • Note: The dual use of HTML5 tags and ARIA roles is considered best practice during the transition to full HTML5 adoption.

Why it Matters

Main landmarks serve as vital navigation anchors for screen reader users, allowing them to skip directly to the central content of a web page. If multiple <main> elements exist:

• Screen reader navigation becomes confusing or inconsistent.

• Users may miss critical content or navigate inefficiently.

• Assistive technologies that rely on unique landmarks may misinterpret the page structure.

By maintaining a single main landmark, you provide a clear, predictable experience for all users, especially those using assistive technology.

Rule Description

This rule enforces the use of only one main landmark on a page. The main landmark is designed to point to the primary content area. If multiple main regions are present, the user experience for screen reader users is degraded. This rule also applies within iframes — each should either have none or only one main region.

The Algorithm (in simple terms)

• Count all elements that are either:

  • <main>, or

  • Have the attribute role="main"

• Ensure that only one such element exists per page (or per iframe document).