bypass

Description

Each page must include at least one mechanism that allows keyboard and screen reader users to skip past repeated navigation links and jump directly to the main content. Without such a mechanism, users who navigate by keyboard must tab through every navigation link on every page load, which makes the experience tedious and inaccessible.

Common solutions include a “Skip to main content” link, landmark regions (<main>, <nav>, etc.), or a logical heading structure.

Example

In the following example, the page has a long navigation block with no way to skip it. Keyboard users must tab through every link before reaching the page content, breaking the bypass rule.

In contrast, the following code snippet adds a “Skip to main content” link as the first focusable element on the page. Keyboard users can activate it to jump directly to the main content, and the page does not break the bypass rule.

How to fix?

Check if your pages provide a way for keyboard users to bypass repetitive blocks. If not, use one of the following methods:

• Add a “Skip to main content” link as the first focusable element on the page, pointing to the id of the main content area. This is the recommended solution.
• Use HTML5 landmark elements (<main>, <nav>, <header>, <footer>) so screen reader users can jump between regions using their landmark navigation shortcuts.
• Ensure pages have a logical heading structure so screen reader users can navigate by headings.

Reference

• WCAG 2.4.1: Bypass Blocks
• G1: Adding a link at the top of each page that goes directly to the main content area