landmark-no-duplicate-main

Description

The landmark-no-duplicate-main rule ensures that a page has at most one main landmark, represented by <main> or an element with role="main". The main landmark identifies the page’s primary content region. Having multiple main landmarks creates ambiguity for screen reader users navigating by landmark: they cannot determine which region contains the primary content, and assistive technologies cannot reliably guide users to the most important area of the page.

This rule meets WCAG requirements by:

1. Exposing Document Structure (WCAG 1.3.1 Info and Relationships): It ensures the page’s primary content region is unique and unambiguous, so its role can be programmatically determined without confusion.
2. Enabling Content Navigation (WCAG 2.4.1 Bypass Blocks): It ensures users of assistive technologies can navigate reliably to the single main landmark to access the primary content, without encountering multiple competing main regions.

To comply with this rule, ensure that only one <main> element or role="main" exists on any given page.

Examples

This example shows two <main> elements on the same page. Screen readers expose both as “main” landmarks, leaving users uncertain about which contains the primary content.

Here, all primary content is combined into a single <main> element, using headings to distinguish sections within it.

How to fix?

To fix violations of the landmark-no-duplicate-main rule, follow these steps:

• Identify all <main> elements and elements with role="main" on the page.

• Combine their content into a single <main> element, using <section>, <article>, and heading elements to organise distinct content areas within that single region.

• Remove the redundant <main> element or change role="main" to a more appropriate role (such as role="region" with an aria-label) for the secondary content area.

Reference

• WCAG Success Criterion 1.3.1: Info and Relationships

• WCAG Success Criterion 2.4.1: Bypass Blocks