Skip Links – Let People Get To Your Content

If a user comes to your site and only has a keyboard available to them, is your site usable? If you have a large menu with dropdown items, probably not.

Imagine if you go to navigate a site and you have to hit tab until you reach the main content before you (or a screen reader) can start reading the content. Now imagine that you have to do this on every page and you can see why skip links are so important.

What is a Skip Link?

A skip link is a link that you put in your site that provides a way to quickly skip to the main content of your page.  Normally, the skip link is the first link on your page that is hidden to normal users, however, when tab is pressed, it is activate and says “Skip to main content”. When enter is pressed, the wrapper for your content is linked to and becomes active.

An Example

a.skip-main {
    left:-999px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
    color: #fff;
    background-color:#000;
    left: auto;
    top: auto;
    width: 30%;
    height: auto;
    overflow:auto;
    margin: 10px 35%;
    padding:5px;
    border-radius: 15px;
    border:4px solid yellow;
    text-align:center;
    font-size:1.2em;
    z-index:999;
}

 

<body>
  <a class="skip-main" href="#main">Skip to main content</a>

  <!-- Your menu here -->

  <div id="main">
    <!-- Your content here -->
  </div>
</body>