Why your website should have a Skip Link?

#webdev #css #html #codenewbie

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>

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;
}

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

🚀Thanks For Reading | Happy Coding🌃

Top comments (4)

Maureen T'O • Apr 8 '21

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