incorrect-landmark-usage

Description

Landmarks must be used appropriately for the content they contain. This ensures that assistive technologies can accurately convey the structure and purpose of page sections to users. Proper use of landmark is essential for users who rely on screen readers or other assistive tools to navigate and understand page content.

The missing-landmark-region rule aligns with:

• WCAG Success Criterion 1.3.1 (Info and Relationships), which requires that information and relationships must be programmatically determinable.
• WCAG Success Criterion 2.4.1 (Bypass Blocks), which requires that a mechanism is available to bypass blocks of content that are repeated on multiple web pages.

Examples

In the following example, a <nav> landmark is incorrectly used for a main content section. This violates the incorrect-landmark-usage rule because the landmark does not match the content’s purpose.

In the following corrected example, the content is placed in a <main> landmark, which is appropriate for primary content:

How to fix?

To fix violations of the error-suggestion rule, follow these steps:

1. Identify all landmarks on your webpage.
2. Ensure each landmark contains content that matches its purpose (e.g., navigation content in <nav>).
3. Use the most specific landmark available for the content type.
4. Avoid using landmarks for content that doesn’t match their intended purpose. For example, do not place interactive elements like buttons and links inside decorative landmarks.

Reference

• WCAG Success Criterion 1.3.1: Info and Relationships
• ARIA11: Using ARIA landmarks to identify regions
• Landmark Regions