2.4.1 Bypass Blocks

There is a way to skip blocks repeated on every page, such as the navigation.

Level A

What the automated checks look for

Without a skip link or landmarks, keyboard users tab through every repeated block to reach the content.

Who it affects. Keyboard users press Tab through the whole navigation on every page, and screen reader users can't jump to the main content.

How to fix it. Wrap the main content in a main element and add a skip link as the first focusable element.

<a href="#main" class="skip">Skip to content</a>
…
<main id="main">…</main>

<a href="#main" className="skip">Skip to content</a>
…
<main id="main">…</main>