R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Landmark Regions Must Be Used to Organize Page Content

  • Home
  • Blog
  • Landmark Regions Must Be Used to Organize Page Content
  • June 30, 2025

Landmark Regions Must Be Used to Organize Page Content

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

How to Fix the Problem

Ensure that all meaningful content on a page is placed within a landmark region. These regions are created using either native HTML5 landmark elements or ARIA landmark roles. This helps users of assistive technologies—particularly screen reader users—understand and navigate the structure of your page more efficiently.

Use HTML5 Landmark Elements Where Possible

Prefer native HTML5 semantic elements for defining landmark regions:

html
<header>This is the header</header>
<nav>This is the nav</nav>
<main>This is the main</main>
<footer>This is the footer</footer>

These elements are automatically recognized by assistive technologies and offer clear, semantic meaning.

When Necessary, Use ARIA Roles as a Backup

If HTML5 landmarks are not applicable in your context, you can define similar regions using ARIA roles:

html
<div role="banner">This is the header</div>
<div role="navigation">This is the nav</div>
<div role="main">This is the main</div>
<div role="contentinfo">This is the footer</div>

⚠️ Best practice: Use native HTML5 elements instead of ARIA roles when possible, as native elements provide broader compatibility and cleaner code.

Avoid These Common Mistakes:

  • Do not place major content outside of any landmark region.

  • Do not rely on ARIA roles alone when a native HTML5 landmark is available.

  • Do not use landmarks only for decorative or non-interactive content.

Why it Matters

Landmark regions are essential for screen reader users and others relying on assistive technologies. They allow users to:

  • Quickly jump between sections of a page (like header, main content, navigation, and footer).

  • Understand the structure and layout of the page.

  • Efficiently locate content without having to read the entire page linearly.

If content is outside of these landmarks, it becomes difficult to find or lacks context, especially for users navigating via keyboard or using screen readers. This can result in a confusing, disjointed, or frustrating experience.

Rule Description

All significant content (except skip links) should be enclosed within one of the recognized landmark regions—such as <header>, <nav>, <main>, <footer>—or their ARIA equivalents. This ensures clarity and logical organization of page content for users and assistive technologies.

The Algorithm (in Simple Terms)

Check each portion of the page and verify that it is:

  • Included inside a landmark region, either via HTML5 elements or ARIA landmark roles.

  • Not left floating unstructured, which would make it harder for users to navigate.

Tags:
Share:

Leave A Comment