How to implement accessibility "Skip to content"

Cover photo by Kid Circus on Unsplash.

Introduction

It's quite easy to make an assumption that everyone accessing the Web does so with a computer equipped with a mouse that aids website navigation but that's not always the case.

You might find yourself in a situation that you need to access a website with lots of content and the only option available for navigation to you is your keyboard and you need to get to the site's main content. This is where the Skip to content can be of great help.

What is Skip to content?

Providing a “skip to main content” link allows your user to easily skip to the main content of the page with a simple link without needing to go through headers, menus, and other repetitive elements that appear on every page (source).

How does "skip to content" work?

On a normal day the "skip to content" link is hidden from view. The user has to hit the Tab key which will reveal the "skip to content" link and then Enter key to jump to the main content.

How can I implement skip to content?

For this article it's quite straight forward but depending on the complexity of your website you may have a different definition of what the main content is but the idea demonstrated here can easily be applied to your project.

How to implement skip to content

We'll make use of an HTML and CSS to show how "skip to content" works. The HTML file will contain enough content that will allow us to jump to a particular section of the file that we consider as the main content.

The HTML

<div class="container">
  <div id="skip">
    <a href="#content">Skip to main content</a>
  </div>

  <header>
    <h1 style="text-align: center;">Accesibility skip to content</h1>
  </header>

  <main>
    <p><!-- Put large chunk of text here --></p>
    <p><!-- Put large chunk of text here --></p>
    <p><!-- Put large chunk of text here --></p>

  <div>
    <h1>This is the main content</h1>
    <p><!-- Put large chunk of text here --></p>

    <p id="content"><!-- Put large chunk of text here --></p>
  </div>
 </main>
</div>

The CSS

The CSS is the heavy lifter here because we'll use it to hide the "skip to content" link, and we'll dictate what happens to it when it is shown on screen.

There are a variety of ways to hide stuff in CSS but in this case we'll use of CSS position property with a value of absolute to move it off-screen.

When the user hits the Tab we change the position to static and alter some of its properties that will allow it to show on screen.

Please, read the comments in the code.

/* Cosmetics */
body {
    background-color: #f9f9fa;
}

.container {
    margin: 0 auto;
    width: 55%;
}

h1 {
    line-height: 1.7;
    margin: 0.6rem 0;
}

p {
    color: #343434;
    font-family: Georgia, sans-serif, serif;
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-rendering: optimizeLegibility;
}

/**
  * The main deal.
  *
  * 1) The left property moves it 10000 pixels off screen
  * 2) The height and width is reduced to 1px making it
  *    impossible to show on most computer screens
  */
#skip a {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#skip a:focus {
    height: auto;
    position: static;
    width: auto;
}

Demonstration

Conclusion

As you can see it only takes a few lines of code to implement "skip to content" but it benefits users who make use of keyboard for site navigation.

This is a step forward, I am pretty sure you can do better.