R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

  • June 26, 2025

Bypass Blocks with Landmarks for Accessibility

Rule ID: bypass
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549

How to Fix the Problem

To make web pages more accessible, especially for users navigating via keyboard or assistive technology, ensure that each page contains a single, clearly defined main landmark. This allows users to bypass repeated content like headers and navigation menus and jump straight to the primary content.

Implementation Tips:

  • Use the native HTML5 <main> element to denote the main content area.

  • Avoid using multiple <main> elements on a single page—only one is allowed and expected.

  • Structure your page using semantic landmarks:
    <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>.

  • Prefer native HTML5 elements over ARIA roles (e.g., use <main> instead of role="main").

Example of Correct Landmark Usage:

html
<header>
<div>This is the header.</div>
</header>

<nav>
<div>This is the navigation.</div>
</nav>

<main>
<div>This is the main content.</div>
<section>
<div>This is a section.</div>
</section>
<article>
<div>This is an article.</div>
</article>
<aside>
<div>This is an aside.</div>
</aside>
</main>

<footer>
<div>This is the footer.</div>
</footer>

Why it Matters

Websites often include repeated elements such as headers, navigation bars, and advertisements on every page. For users who navigate via keyboard or assistive technologies, these repeated elements can create significant friction.

Accessibility Impact:

  • Keyboard-only users must tab through each repeated element, which is time-consuming and physically exhausting—especially for users with motor disabilities.

  • Providing a clear “bypass” to the main content minimizes this burden, offering quicker, more comfortable access.

  • It enhances overall usability for everyone, especially those who rely on screen readers or voice control software.

Rule Description

Every web page must include a main landmark to identify the primary content section. This helps users bypass blocks of repeated content and get to what they’re actually looking for—quickly and efficiently.

The Algorithm (in Simple Terms)

To pass this rule, the page must include at least one of the following:

  • A <main> landmark (or role="main")

  • A skip link that allows users to jump to main content

  • A top-level heading that clearly introduces the main content

Share:

Leave A Comment