Skip to content Skip to footer

Skip content links

Article Content
  • How skip to content links gives users the same advantages as mouse users (skipping navigation etc)
  • How to format the HTML code for a skip content link.
  • How make a skip content link, invisible and then visible with the tab key with CSS.
  • How skip content links empower keyboard user’s by giving them a choice.

A skip to content link is an important way of improving the user experience of keyboard users. It is a link at the top of the page, made visible by pressing the tab key, which allows users to skip the links in the navigation (or anything other links in the header) and go straight to the content of the website. (this content will usually be inside the main tag). This is a convenient function for keyboard users it avoids the frustration of getting stuck within the navigation of the website (particularly if it has a lot of links), delaying the time it takes to be able to read the main content on the website. This therefore neatly avoids user frustration, allowing them to get straight to where they want to be, at the earliest opportunity.

Why you should have a skip content link

Improving the user experience of keyboard users is important to accessibility because many users are reliant on a keyboard to navigate a website, such as people with motor issues who cannot use the mouse. (Read more about in the article on keyboard navigation here). While a mouse user can easily move past the navigation, this process is much more difficult for someone using the keyboard, as they must keep pressing the tab key to go past every link. It is therefore something that can be easily implemented to improve the accessibility of a website.

As well as allowing users to skip to content you can also allow users to skip straight to the footer and any other part of your website. Providing these shortcuts is a considerate method of improving the usability of a website, showing empathy, and understanding towards keyboard users.

How to format a skip content link

The first part of the process is to create the link.This is formatted with the usual a tag with the “href” attribute inside of it, as you would format any other link.(You can read more about formatting and styling links in this article on accessible links here) However, the key difference with a skip content link is what you are linking to. You don’t want to link to a page but a specific piece of content on the page.

To do this, you must first attach an ID to the HTML container your content sits inside.If you are using semantic code, this HTML container will be ‘Main’. So you could give the HTML container of main the ID of “main”.An example is shown in the code below.

Screenshot of Code for formatting main with an id.
Main tags with id equals main inside of them.

Once you have this ID, you then link to it using the href attribute. So you would write inside the a tag, href equals “#main” (this # is how ID’s are formatted when you are selecting them), within your a tag. This will allow anyone clicking the link to be taken to all of the content that’s its inside the main tag, skipping them past the navigation. An example is shown in the code below.

A code sample for skip to main content
A tag, with href attribute equals hashtag main and the text skip to main content before the closing a tag.

Styling the skip content Link

Once you set up your link, it is a matter of styling it. You can select it again using the “#” symbol and then the name of the ID. In the below example, a unique selector is used which targets any link which has that specfic ID. An example is shown in the code below.

code screen shot for the href selector
Two square brackets with href equals main inside, followed by, left and right curly brackets.

An important part to consider with this next part of the process is that it is usual practice to have the skip link hidden from users not using a keyboard to navigate the website. In theory, you can have the link appeared to all users, but this would be unnecessary and could be confusing for mouse users, as they do not need a skip link, they can easily skip to the content simply by scrolling with the mouse.

There are multiple methods of doing this but I would recommend starting with Heydon Pickering’s method. ( You can read all about Heydon on people to follow page here or you can read a summary of Heydon’s book that covers this method here). Heydon makes the link not visible to most users, by posting to the right, far off the screen using, postion absolute and then right 100%. This is shown in the code below.

code sample of styling to get the link off screen
CSS styling href equals main, two curly brackets with position absolute, top zero and right 100 percent inside.

He then changes the positioning from off the screen to auto with the focus pseudo class. (You can read more about the focus pseudo class here) This is so that the link will then only appear when you press the tab key. This makes the skip link only visible to keyboard users (and those using a screen reader). You can see a sample of the code below.

Code Sample of the focus styling for the skip link.
CSS styling with href equals main, followed by colon focus, and then right auto, all before the closing bracket.

If you would like you can then bring in some of your own styling to Heydon’s example, such as changing text size, colour, font padding, etc but make sure you don’t change any of the positioning, as it will stop this method from working. This rule applies to both the general styling for the skip content link and the styling with the focus pseudo class.

I prefer this method to others because it is relatively simple. By using positioning in this way it avoids using a minus z-index or other tequniques which can be complicated to get your head around, when starting out as a developer. (If you do want to use z-index, I would highly recommend reading Keith Grants CSS in Depth First, you can buy Grants book here).

If you wanted to create an additional skip link for the footer. It is simply a case of repeating this process but instead of using the ID on the main container, you are instead using the ID on the footer container. This is the case in both formatting the link and the styling. For example, the html could read href equals “#footer”, as shown in the code below.

code sample skip to footer link styling.
A tag, with href attribute equals hashtag footer, then the text skip to footer followed by the closing a tag.

Why a skip content link empowers your users

Whilst some of this CSS styling, may seem complex at times. Following a useful example like Heydon’s, makes this process considerably less challenging. A skip content link is well worth the effort as it can make a big difference to keyboard users. It empowers them by giving them the choice. With a skip conent link they can decide whether they go through the navigation or go straight to your content. This is a choice that your users will appreciate, improving the accessibility and making browsing your website a more enjoyable experience.

Leave a Reply

Your email address will not be published. Required fields are marked *