Ensure all page content is contained by landmarks

The region rule ensures that all page content is enclosed within landmark regions using HTML5 elements or ARIA landmarks. This improves navigation for screen reader users.

What is being tested?

This rule checks that:

• All page content is inside landmark regions, such as <header>, <nav>, <main>, <footer> or their ARIA equivalents like role="banner", role="navigation", etc.

Why it matters

Landmarks help screen reader users jump between major sections of a page efficiently. Without them, users may have to navigate the page linearly, making it difficult to find specific content or understand page structure.

While ARIA landmarks can improve navigation, they are invisible to sighted users and do not replace skip links or other visual navigation aids.

Good markup examples

HTML5 landmarks:

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

ARIA landmarks (if HTML5 is not available):

<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 practices

• Prefer HTML5 landmark elements (<header>, <nav>, <main>, <footer>) over ARIA roles.
• Wrap all significant content (excluding skip links) inside a landmark region.
• Use ARIA landmarks only when necessary (e.g., for older markup or custom components).