How to Create a 'Skip to Content” Link

Skip links are small internal navigation links that help users move between pages. You may never really see it because they are often hidden, used as accessibility enhancements that allow keyboard users and screen readers to jump from the top of the page to content without having to traverse other elements on the page first.

In fact, if you open DevTools, you can find one on CSS-Tricks.

In my opinion, the best way to implement skipping a link is to hide it and then show it when it gets focus. So, suppose we have a link in HTML:

<a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">
  Skip to content</a>

…We can give it absolute position and move it away from the screen:

 .skip-to-content-link {
  left: 50%;
  position: absolute;
  transform: translateY(-100%);
}

Then when it gets focus, we can re-display it and style it some way in the process:

 .skip-to-content-link {
  background: #e77e23;
  height: 30px;
  left: 50%;
  padding: 8px;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
}

.skip-to-content-link:focus {
  transform: translateY(0%);
}

This will hide our link until it gets focus and then display it when it gets focus.

Now, let me explain in detail, starting with this famous quote from Miles Davis:

Time is not the main factor, it is the only factor .

As I was writing this in Ireland in the rain, I thought of the challenges many users face when using the network I was used to. We put a lot of effort into creating a great user experience without taking into account all users and how they can meet their needs. Granted, I never heard of skipping links before I finished my Marcy Sutton’s course at Frontend Masters. Ever since learning about the power and simplicity of using skip links, I decided to make it my mission to raise awareness – what other platforms are better than CSS-Tricks!

The solution is the answer to the question, so what is the solution to help keyboard users and screen readers find the content of the page quickly? In short, the solution is time . Enable users to navigate to the part of the website they are most interested in, allowing them to save valuable time.

Take Sky News website as an example. It provides a "Skip to Content" button that allows users to skip all navigation items and jump directly to the main content.

You can use the keyboard to navigate to the top of the page to view this button. This is similar to the implementation shown above. The link is always in the document, but is only visible when it gets focus.

This is the type of skip links we will create together in this article.

Our sample website

I built a sample website that we will use to demonstrate skip links.

The site has many navigation links, but to save time, there are only two pages: "Home" and "Blog Page". This is enough to give us an idea of ​​how things work.

Determine the problem

Here is the navigation we are using:

There are eight navigation items in total, and keyboard users and screen readers must first traverse these items to reach the main content below the navigation.

This is the problem. Navigation may not matter to the user. Maybe users get direct links to articles and they just want to access the content.

This is a perfect use case to use skip links.

Create a link

There are several ways to create a "Skip to Content" link. What I like to do is a similar example to Sky News, i.e. hide the link until it gets focus. This means we can put the link at or near the top of the page, for example<header></header> Inside the element.

 <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">Skip to content</a>

This link has a .skip-link class so we can style it. href attribute points to https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3 , which we will add to the bottom of the page.<main></main> The element's ID. This is where the link will jump to when clicked.

 <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">Skip to content</a>

<main></main>

If we just put the link in the title without the style, this is what we have.

This doesn't look great, but the functionality exists. Try navigating to the link using the keyboard and press Enter when it gains focus.

Now it's time to make it look beautiful. We have to fix the positioning first and show it only if our skip link gets focus.

 .skip-link {
  background: #319795;
  color: #ffff;
  font-weight: 700;
  left: 50%;
  padding: 4px;
  position: absolute;
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: translateY(0%);
}

The magic here lies in the transform property, which hides and displays it based on whether our skip link gets focus or not. Let's make it look a little better by quickly converting it on the transform property.

 .skip-link {
  /* Same as before*/
  transition: transform 0.3s;
}

It will now convert to the view, which makes it a little better.

You should now (hopefully) have what I have below:

As you can see, skip the link bypasses the navigation and jump directly to the<main></main> element.

It is OK to use multiple links!

Currently, this link serves only one purpose, which is to skip content to our website. But we don't have to stop there.

We can go a step further and create a skip link with more options, such as a way to jump to the website footer. As you might imagine, this is very similar to what we have done.

Let's make the blog page of the sample website easier to use by using multiple skip links. Blogs usually use AJAX, and more posts are loaded when they reach the bottom of the page. This makes it difficult to reach the footer of the website. This is the problem we want to solve.

So let's add a second link which bypasses all autoloading business and jumps the user directly to the https://www.php.cn/link/8248f16fa738b0bfe6013edf69d873bf element on the page.

<div>
  Skip to <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">content</a> or <a href="https://www.php.cn/link/8248f16fa738b0bfe6013edf69d873bf">footer</a>
</div>

We also need to modify our CSS a little bit and use :focus-within pseudo-selectr.

 .skip-link {
  transform: translateY(-100%);
}

.skip-link:focus-within {
  transform: translateY(0%);
}

This means that if anything in our .skip-link element gets focus, then we will display it. Unfortunately, neither Internet Explorer nor Opera Mini supports focus-within , but it has very good coverage and can use polyfill.

This browser supports data from Caniuse, which contains more details. The number indicates that the browser supports this feature in this version and later.

The last thing we need to do is make sure that we have an ID on our footer element so that the link has something to jump to.

<footer id="footer"></footer>

This is what this brings to us:

If we want to go a step further (I encourage this), we can style each link differently so that the user can differentiate between the two. Both links in this example are pure white, which is very effective for a single button that performs a single operation, but it makes it more clear that we are dealing with both links if they are rendered differently.

Skip to conclusion

Do you use skip links on your website? Or, if not, does this convince you to use one? I hope it is clear that skipping links is an excellent added value when it comes to accessibility of the website. While it is not a panacea to solve all accessibility issues, it does solve some use cases, thus creating a more complete user experience.

Here are some well-known websites that use this technology or similar technologies:

• Amazon
• Chase Bank
• Google (not skip links, but links that provide accessibility feedback)
• Target
• New York Times
• Zillow

The above is the detailed content of How to Create a 'Skip to Content” Link. For more information, please follow other related articles on the PHP Chinese website!