I should still be able to do that if I don’t have a mouse. But how?
Bypass Blocks makes sure that users can skip over repetitive content—like navigation menus or ads—when navigating with a keyboard or other assistive technology, so they can get straight to what matters.
Who this impacts
- People using keyboards or keyboard substitutes: Users who rely on keyboards for navigation need a way to quickly skip past repeated content (like menus) and get to the main content or important areas without tabbing through everything.
- People using screen readers: Screen readers read through all the content, including repeated elements. Without a way to bypass these blocks, users can get stuck listening to the same information on every page.
How to meet Bypass Blocks
- Provide skip links: Offer a link (or more than one) at the top of the page that appears when focus is applied, and allows users to skip past repeated elements (such as navigation menus) and go directly to the main content or other areas.
- Use landmarks and regions: Implement ARIA landmarks or semantic HTML elements (such as
<main>,<nav>,<search>) to allow assistive technologies to identify and skip over repeated blocks. - Use headings: Using properly nested headings
<h1>,<h2>,<h3>etc. will make your content easier to read and help users find what they need. - Implement expandable menus: Cut down on the clutter (and tab stops) in the navigation and make it easier for everyone to get to the content they want.
How to make a Skip Link (with code!)
The simplest answer to Bypass Blocks is to give users a way to move the keyboard focus from the top of the page to the beginning of the content, like a magic box that takes you to exactly where you want to go.
Often called “Skip Links,” you may not even realize they’re on the site, as they are typically hidden unless a user is navigating using focus. While the most obvious skip link would be one that takes you past the navigation bar and straight to the first heading, it is wise to consider what actions a user might do on your site and provide quick ways to get there.
Think about why users come to your site, and put additional skip links in for the main things they would want to do, whether it’s login, search, or viewing their shopping basket.
To make a Skip Link, you will need two pieces of code.
First, you need to identify where the link will go. Typically the target of a ‘skip to main content’ link should be placed below the navigation and above the H1 or main heading of the content.
Then you’ll need to make a link that points to that spot on the page, and put it at the very top of the code, at the start of the <body> tag.
Examples of skip links:
- Skip to main content
- Skip to login
- Skip to basket
Skip links should follow a few basic rules:
- They should be the first item(s) in the TAB order of the page
- Usually hidden from visual mouse users
- Clearly visible (size and color) when activated
Exceptions
There are no specific exceptions for WCAG 2.4.1. All sites should offer a way to bypass repeated content, whether it’s through skip links or accessible landmarks.
Top tips
- Make skip links easy to find: Ensure that skip links are visible and accessible to keyboard users right at the top of the page.
- Use semantic HTML: Structure your content using semantic HTML or ARIA landmarks, making it easier for assistive technologies to help users bypass repetitive elements.
- Test with keyboard navigation: Regularly test your site’s navigation to ensure that users can bypass repeated content without getting stuck.