DEV Community

Cover image for Why your website should have a Skip Link?

Why your website should have a Skip Link?

rahxuls profile image Rahul Originally published at ・2 min read

It's critical that any web pages you create are accessible to all. Unfortunately, it's something that's often ignored and neglected.

This quick and easy tutorial will show you how to add a skip link to your page to make it more accessible. It's usually a good idea to incorporate accessibility into something you're making because it usually results in a much better overall product.

What is skip link?

It is a link that lets the user skip to the main content of the page. It's usually hidden and becomes visible when it's in focus.

When and Why you need?

If a user is navigating a site with their keyboard they will usually is the tab key to go through the links and bottoms in your page.

So this means they will have to tab through each link in your navigation (since it's usually at top) before they get to the main content every time they navigate between pages.


Having a link that will skip past all that and scroll straight to the main content of the page will make the process less frustrating and more accessible.

Let's see


  <a class="skip_link" href="#main">
    Skip to main
            <!--HEADER AND NAVIGATION HERE -->
   <main id="main"> 
     <p>First paragraph...</p>
Enter fullscreen mode Exit fullscreen mode


.skip_link {
    position: absolute;
    top: -1000px;
    left: -1000px;
    height: 1px;
    width: 1px;
    text-align: left;
    overflow: hidden;

.skip_link:hover {
     left: 0;
     top: 0;
     width: auto;
     height: auto;
     overflow: visible;
Enter fullscreen mode Exit fullscreen mode

Have you used skip links? No? Give it a try!

🚀Thanks For Reading | Happy Coding🌃

Discussion (4)

Editor guide
maureento8888 profile image
Maureen T'o

This is actually good for accessibility reasons too ☺️ Screen readers can tab it into focus and skip the navigation so they don’t get the entire nav bar read out to them! 💡

Sloan, the sloth mascot
Comment deleted
rahxuls profile image
Rahul Author

Ah!! Sorry. Added.

alvaromontoro profile image
Alvaro Montoro

Looks perfect now