landmark-one-main

Description

The landmark-one-main rule ensures that every page contains at least one main landmark, represented by <main> or an element with role="main". The main landmark identifies the primary content region of the page. Without it, screen reader users who navigate by landmarks have no way to jump directly to the principal content, forcing them to tab through all preceding page elements, such as headers, navigation menus, and banners, on every page visit.

This rule meets WCAG requirements by:

1. Exposing Document Structure (WCAG 1.3.1 Info and Relationships): It ensures the primary content region of the page is programmatically determinable, giving assistive technologies the structural information needed to support landmark navigation.
2. Providing a Skip Mechanism (WCAG 2.4.1 Bypass Blocks): It ensures users can bypass repeated navigation blocks and jump directly to the main content area, satisfying the requirement for a mechanism to skip blocks of content.

To comply with this rule, wrap the primary content of each page in a <main> element or use role="main" on a container element.

Examples

This example shows a page with no <main> element. Screen reader users navigating by landmark have no way to jump directly to the content.

Here, the primary content is wrapped in a <main> element, providing the main landmark for navigation.

How to fix?

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

• Identify the primary content region of the page: the section that contains the content unique to that page, excluding site-wide headers, navigation, and footers.

• Wrap that primary content region in a <main> element, which is the preferred native HTML approach.

• If you cannot use <main>, add role="main" to the container element that holds the primary content.

• Ensure each page has exactly one main landmark to avoid the duplicate-main issue covered by the landmark-no-duplicate-main rule.

Reference

• WCAG Success Criterion 1.3.1: Info and Relationships

• WCAG Success Criterion 2.4.1: Bypass Blocks