You’ve most likely heard the term “skip link.” The standard take on the skip link is we include a visually-hidden link at the top of the page. When it receives focus, it becomes visible and when activated jumps you to the main content. While this is the primary use and function of this guideline, I’ve found it applies to other areas. Let’s look at the different reasons and methods.
Primary purpose
A mechanism is available to bypass blocks of content that are repeated on multiple web pages.
On of the key pieces is the “repeated on multiple web pages.” Imagine we have a marketing landing page. It has 10 sections, and each section is listed as a link at the top of the page. Activating the links takes you to the related section.
If you have 10 distinct pages, you need a bypass link. This allows the user to get past the repeated navigation on each page. But, if this is a single page and those are in page links, then you do not need a bypass. This is because while a set of 1 is a valid set, the navigation content is not repeated. Repetition on multiple web pages requires a set of at least 2.
According to the intent of this success criteria, “navigation links, header content, and advertising frames” are examples where a bypass is utilized. These components often appear repetitively on pages.
Who does this help?
Everyone. But the primary and secondary users who benefit the most are people with physical limitations and screen reader users. If you have been in accessibility more than 30 seconds, you know blind users will add screen readers to hear what is on the screen. They will operate it via keyboard. But we have far more people who benefit and the blind aren’t the primary user target. Keyboard only and switch users. People whose disability prevents them from using a mouse. They rely on keyboard navigation.
Hypothetical
You have Cerebral Palsy. This is a disease where your muscles don’t respond like they should, but you are fully aware of everything. For some people, the issues are small, for some they are large. The issues could be more time is needed to complete tasks. Or they may need a different interface.
Add skip links where ever there is going to be a high density of tabstops.
Your occupation therapist brings you a switch device. Helps you set it up with your computer. There are two buttons. In the browser, one basically works as tab. The other a modifier based on the control in focus. You are now free to board the web.
To do a search with Google, you use your switch to tab through programs and launch a browser. You use the switch to tab to the address bar. Using the onscreen keyboard, you tab to letter by letter to enter the address. Google loads. You tab until you reach the search and enter “weather next 10 days” and search.
You’re shown a chart with the weather for the next 5 days. Below that a series of links to other weather sources. But the chart has a tab stop on the component and the heading. It also has a tab stop on a URL, each day, each temp, and each condition, for 5 days! You see the link of Weather.com is next. However, you need to press your switch eighteen (18) times. This is required to get to the site with the answer to your question.
It’s Christmas time and Granpda has Parkinson’s. He uses his computer without a mouse, relying on the Tab key to move around mostly. Of course he’s out on Walmart’s site shopping for the grand kids. He wants to buy one piece of clothing and one two for each kid. He has boys and girls to shop for. There is also his grand kid Max, whom Grandpa loves but doesn’t understand their gender.
I have friends working at Walmart. They are doing a good job keeping the site rather accessible. I’m not trying to shame. But this is a great example of why bypass blocks are needed. Grandpa can get to Search in three tabs. There is a bypass link too that jumps over this navigation. But if Grandpa wants to show boys clothes, he needs to tab 6 times to get to Departments. Open the control and navigate down a list.
This gets frustrating fast
On a modern site, the number of links gets annoying fast. Maybe you read my post about the number of tabstops we have in Product Cards. Let’s imagine a worker who is doing data analysis. The applications they run vary. However, they all push to a dashboard with real-time metrics. These metrics include sales, site stability, sales funnels, drop-offs, and much more. Filled with charts.
We named each chart with headings. Where applicable, the chart is in a named landmark. Each chart has a data table fallback for those unable to see the chart. They even have AI summaries. The navigation requires you to tab through the data points on the chart. This is necessary to get to the alternatives. You could flip that of course. You can use tabpanels or disclosures to help. You can also provide “Skip chart” link that works just like the one at the top of the body.
Is this required?
If the chart appears more than once in this configuration somewhere else on the site, yes. If it does not, then no. Remember, repeated content.
So why do it?
You don’t like it when you get behind the family with $600 worth of groceries. You just need a gallon of milk. You don’t like being late. It frustrates you when the person in the left lane drives 5 miles under the limit. Everyone wants to be more efficient. Everyone wants to get to their thing faster.
Add skip links where ever there is going to be a high density of tabstops. Be clear with what you are skipping. Provide them just after the header of the section. This way they understand the content section, and where they will go if they skip it.
How do we make the right link?
Into the technical! A skip links requires two things – something to skip and a target to land on. We mentioned where you may want to use them. The next thing is what do we target?
The first answer is, we do not target empty anchor elements( <a href="#"></a> ). We should be targeting something specific. If you have a choice, target the next active control after the object skipped. If that will cause a loss of context, then we place it on the next heading.
There is a heading following the object, right? Videos, tables, charts, ads, and mini-apps break flow and understanding for a lot of users. Especially if they are trying to read the page. They do not watch the video, use the app, or they need the analysis instead of the table. Each of these is a unique piece of content that is a subtype of the greater content. That justifies having headings.
To make the next heading the target, we provide an ID and tabindex of -1. Now we can add the target to the link. We do this by setting the Href to the CSS selector for the ID (<a href="#main">Skip to main</a>). We also want to use JavaScript’s focus() method to place the focus on the the target. This ensures that the page doesn’t just scroll to the section. The HREF does that. It actually lands focus where intended.
Let’s see the code together:
<h2>Chart Section</h2> <a href="#analysis" class="skip-link">Skip to analysis</a> <div><h3 id="charts">[...]</h3></div> <div><h3 id="dataTable">[...]</h3></div> <div><h3 id="analysis" tabindex="-1">Analysis</h3>[...]</div>
/*CSS - this is the most basic example*/
.skip-link {
display: block;
position: absolute;
top: -10000px;
}
.skip-link:focus, .skip-link:focus-within {
top: 0;
}
WCAG requires bypassing content that is repeated on multiple pages. Therefore, we don’t need to add other bypasses. However, given how keyboard-only and switch users operate, we need to offer them an equivalent experience. They should be able to jump around a page like a sighted user might. Or provide them shortcuts like a screen reader might.
Wrapping it up
We covered what 2.4.1 is all about. How the emphasis is on repeated content across multiple pages. We examined why we might want them elsewhere. I’ve given an example of how all bypass links should work. If you have more questions, come find me on LinkedIn or BlueSky to discuss!