DEV Community

loading...
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 rahulism.tech ・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.

(WHICH IS ANNOYING😬😬)

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

HTML:

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

CSS:

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

.skip_liink:active, 
.skip_link:focus, 
.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)

pic
Editor guide
Collapse
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! 💡 a11y-101.com/development/skip-link

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

Ah!! Sorry. Added.

Collapse
alvaromontoro profile image
Alvaro Montoro

Looks perfect now