DEV Community

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

Posted on • Originally published at rahulism.tech

Why your website should have a Skip Link?

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🌃

Top comments (4)

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

Ah!! Sorry. Added.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Looks perfect now