Page must have means to bypass repeated blocks
Squash more accessibility bugs with axe DevTools Pro
Compliance Data & Impact
Disabilities Affected
- Blind
- Deafblind
Standard(s)
- WCAG 2.1 (A)
- WCAG 2.0 (A)
- WCAG 2.2 (A)
- Section 508
- Trusted Tester
- EN 301 549
WCAG Success Criteria [WCAG 2.1 (A)]
- 2.4.1: MUST: Bypass Blocks
WCAG Success Criteria [WCAG 2.0 (A)]
- 2.4.1: MUST: Bypass Blocks
WCAG Success Criteria [WCAG 2.2 (A)]
- 2.4.1: MUST: Bypass Blocks
Section 508 Guidelines
- 1194.22: MUST: Web based intranet and Internet Information & Applications
- 1194.22 (o): MUST: A method shall be provided that permits users to skip repetitive navigation links.
Trusted Tester Guidelines
- 9.A: MUST: A keyboard-accessible method is provided to bypass repetitive content.
How to Fix the Problem
Ensure each page has a main landmark to provide a mechanism to
bypass repeated blocks of content or interface elements (like header and
navigation) and quickly arrive at the main content.
Landmarks SHOULD be used to designate pre-defined parts of the layout such as the main content section.
A page SHOULD NOT contain more than one instance of the main landmark.
HTML5 vs. ARIA:
As a general rule, it is usually best to use native HTML elements rather
than their ARIA equivalents whenever possible. Therefore, even though the
ARIA Role role="main" is listed among landmarks by most screen
readers, use the the corresponding main HTML5 element instead.
Good Example: Using Appropriate Landmarks
In this example, all content is inside of a landmark, and landmarks are used to properly identify the various types of content.
<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
Since web sites often display secondary, repeated content on multiple pages (such as navigation links, heading graphics, and advertising frames), keyboard-only users benefit from faster, more direct access to the primary content on a page. This reduces keystrokes and minimizes associated physical pain.
For users who cannot use a mouse, navigating with a keyboard is more difficult and time-consuming when the interface does not include methods to make keyboard navigation easier. For example, to activate a link in the middle of a web page, a keyboard user may have to tab through a large number of links and buttons in the header and main navigation of the page.
At the extreme end, users with severe motor limitations might require several minutes to tab through all of those elements, and can lead to fatigue and possible physical pain for some users. Even users with less severe constraints will require longer than mouse users, who can click on the desired link in a second or two.
Rule Description
Each page must have a main landmark to provide a mechanism to
bypass repeated blocks of content or interface elements (like header and
navigation) and quickly arrive at the main content.
The Algorithm (in simple terms)
Checks for least one of the following features:
- an internal skip link
- a heading
- a landmark region
Resources
Refer to the complete list of axe 4.8 rules.
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: