Skip to Main ContentSkip to Footer

Accessibility: Skip to main content

October 24, 2019

We don’t like repetitive actions

We don’t like doing repetitive things. We want to bypass adds on YouTube and skip the opening credits when we watch Netflix shows.

When we surf the web we do the exact same thing.

We try to get as quickly as possible to the main content of the page and scroll past all the information that isn’t relevant to us.

A non-accessible website will put tons of elements between the user and the content he wants to reach. A user with accessibility (a11y) concerns won’t be as quick as others because he will have to navigate through each individual element, blocking his way on every page!

We want to remove these repetitive steps and let the user decide if he wants to skip them — we will add a “skip to main content” link!

The concept of the skip to main content

When blind users interact with your site, they use the TAB key to jump from each consecutive intractable element such as buttons, links, or inputs.

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.

The nice thing about the a11y links is that they are only visible to users when they select them using the TAB key.

This technique is also referred to as “skip navigation links”.

How many skip links do tou need

Websites typically have something like 3 or 4 links that are immediately shown when you start pressing TAB on the specific website.

Google sequence is:

  1. Skip to Main Content
  2. Guide for Accessibility
  3. Feedback on Accessibility

Other companies might have sequence like this one:

  1. Skip to Main Content
  2. Accessibility Statement
  3. Guide for Accessibility

Starbucks, for example does this:

  1. Skip to Main Navigation
  2. Skip to Main Content
  3. Skip to Footer

How you can add skip links

You need to do 3 things:

  1. Decide how many skip links you need, and for each area you want the user to be able to skip to, you should add a unique HTML id to make the internal anchor link jump to that section the user clicks that link.

In my example I will add 3 links:

  • The first link goes to the Accessibility Statement which is a new page like /statement.html.
  • The second link goes to the main content of the page which is located after all the menu links. To navigate to this section, I will add an ID tag to the content like id="content".
  • The third link goes to the footer which contains all the specific links to navigate through the site, so I add id="footer" to this section.

https://gist.github.com/Giorat/91e48f483553a50c318cdf6c1abc8da7

2. You will also need to add some CSS to make it work. The skip-main class makes these links visible only when they receive the focus of the user by pressing the TAB key, and they will appear on the top left corner of the screen.

https://gist.github.com/Giorat/c8d26023ea179b163a79706aa923e773#file-skiplinks-css

3. Finally, add a dynamic Javascript function to insert these links at run-time. With this code, you won’t need to manually modify the base model of any of the pages, and you will be able to add new skip links easily by inserting more elements to the skipLinks variable.

https://gist.github.com/Giorat/0f313e98ef11e6b012c499aa61428130

Complete example

You can find a complete example to play with on CodePen: https://codepen.io/Giorat/pen/jOObBMe

Test your website for accessibility issues!

There are many custom product to do so like Husable that will provide you a real human test valuation of your website to discover real problems that automatic tools won’t find or discover cause you simply need a human!

References & Resources


Subscribe to my email list!

If you enjoy my work, you should definitely join my newsletter"Giorat Mails". It’s one email a week with everything interesting I’ve read or found, plus new articles and fresh tutorials.

Sign up for our newsletter