• June 1, 2025

Title: Ensuring a Single Main Landmark for Better Accessibility

Rule ID: landmark-one-main

Ruleset: axe-core 4.10
User Impact: Moderate
Guidelines: Deque Best Practice

How to Fix the Problem

To improve accessibility and compliance with best practices, ensure your web page contains only one <main> landmark. This landmark represents the primary content of the page and helps screen reader users quickly locate the core material.

Here’s how to fix this:

1. Use Only One <main> or role="main" Element:

   • Only one <main> tag or element with role="main" should be present per page.

   • Example:

     html

     KopierenBearbeiten

     <main role="main">
<p>Primary content goes here.</p>
</main>


2. Contain All Major Content in Landmark Regions:

   • Wrap content in appropriate HTML5 landmark tags:

     • <header> with role="banner"

     • <nav> with role="navigation"

     • <main> with role="main"

     • <footer> with role="contentinfo"

   • This ensures screen reader users can easily skip to key sections of the page.

3. Handle <iframe> Correctly:

   • If you use <iframe> elements, ensure:

     • Each iframe has zero or one main landmark inside it.

     • Avoid adding multiple main roles within the iframe content.

4. Combine HTML5 Tags with ARIA Roles:

   • For enhanced compatibility, use both the HTML5 tag and ARIA role (redundant but more robust).

   • Example structure:

     html

     KopierenBearbeiten

     <header role="banner">Company branding</header>
<nav role="navigation">Main site navigation</nav>
<main role="main">Page content</main>
<footer role="contentinfo">Copyright</footer>


5. Avoid Nesting Main Landmarks:

   • Never nest a <main> tag inside another landmark region or another <main> tag.

Why it Matters

For users of assistive technologies such as screen readers, landmarks act as navigational waypoints. A single, clear <main> region ensures they can quickly locate the primary content of a page.

Multiple <main> landmarks confuse screen reader users, who might expect only one route to the core content. If content is outside recognized landmark regions, it can be skipped or misunderstood, significantly reducing usability and accessibility.

As HTML5 fills gaps that older HTML versions had, such as the lack of semantic structure, following these best practices helps your page remain future-proof and accessible.

Rule Description

This rule enforces the practice that each web page must include only one main landmark. This helps define the primary content area clearly for assistive technologies. Pages that include iframes must also ensure each iframe contains either zero or exactly one main landmark.

The Algorithm (in Simple Terms)

1. Scan the page for <main> tags or elements with role="main".

2. Flag an issue if:

   • More than one main landmark exists.

   • Any iframe contains more than one main landmark.

3. Verify that all content is placed within appropriate landmark regions to enhance navigability.