How to implement accessibility "Skip to content"
Tags: html, a11y, css
Published: 2020-06-23 12:10:16

---
title: How to implement accessibility "Skip to content"
published: true
description: A simple guide on how to implement accessibility skip to content
tags: html, accessibility, css
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f2oohu8cughyl8210aa2.jpg
---

> Cover photo by [Kid Circus](https://unsplash.com/@kidcircus) on [Unsplash](https://unsplash.com).

##__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](https://levelup.gitconnected.com/accessibility-skip-to-main-content-56cef376c98c)).

##__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 <kbd>Tab</kbd> key which will reveal the "skip to content" link and then <kbd>Enter</kbd> 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__

```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 <kbd>Tab</kbd> 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__.

```css
/* 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__

![A GIF image showing demonstration of Accessibility skip to content](https://dev-to-uploads.s3.amazonaws.com/i/mcp1zr1tmt11zg07facl.gif)

##__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.