WCAG 2.4.1: Bypass Blocks

WCAG 2.4.1 Bypass Blocks is a level A success criterion from WCAG 2.0. People need a way to skip repeated blocks such as the header and navigation. A skip link is the usual method.

Keyboard users otherwise tab through the whole menu on every page.

How to test

Load a page and press Tab once. The first stop should be a skip link that moves focus to the main content.

How to fix

Add a skip link as the first focusable control, visible when it receives focus.

Example that fails

The first Tab stop is the logo, then dozens of menu links, with no skip.

Example that passes the check

Skip to content appears on focus and moves to the main heading.

Shopify

Add a skip link at the top of theme.liquid pointing at the main content id.

WooCommerce

Add a skip link in header.php to the content id.

WordPress

Restore the theme skip link if a child theme removed it.

Wix

Do not cover the top of the page so Wix skip controls cannot be reached.

Related fixes