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:
- Skip to Main Content
- Guide for Accessibility
- Feedback on Accessibility
Other companies might have sequence like this one:
- Skip to Main Content
- Accessibility Statement
- Guide for Accessibility
Starbucks, for example does this:
- Skip to Main Navigation
- Skip to Main Content
- Skip to Footer
How you can add skip links
You need to do 3 things:
- 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
idto 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!