Skip to main content

About Skip Links

The first thing I notice

When I attempt to operate a website with a keyboard, which I do regularly, if a website has a skip link is one of the very first things I notice.

I notice particularly:

  • Does one exist? Should it exist?
  • Does it work as predicted by its accessible name (i.e skip to a main content, or skip navigation)?

If you are sighted, when you go to a mobile website you may be accustomed to the menu being hidden away in a collapsed menu. This is sometimes called a hamburger menu due to its common appearance in icons. This is to save the clutter of the menu away from taking up much of the screen. Take this principle, and expand it, and you have the same thing as a skip link.

If you are using a keyboard or a screen reader skip links provide a way to help assist skipping cluttered content.

I have been learning a lot recently about ‘skip links’ which are labor saving devices of a particular kind. They have been around decades, and for example Wordpress has been doing it a particular way for a while now. Now that I know about what they are, I have read about several implementations and analysis. I regularly test for them when I test out a website with a keyboard as the first thing that I check. Some websites do it more easily and in a more predictable fashion than others.

The general idea is a skip link allows you to jump to the main content of the page and skip past the repeated content on every page or that may change but is not the main content of the page.

Are they really necessary?

Well that can depend…Is it necessary to bypass a very small menu to main content? Such as a logo and two or three items? Possibly not.

What if the content in the links in the menu is often updated and changes but the main content of the web page almost never changes? Such as a website with a “Posts” nav link that regularly updates but main content thats basically a static landing page… Possibly not.

You might get some different opinions and there are some conditions and different use cases which can present bugs. You are best not to reinvent the wheel and generally stick with established implementations, and ideally test it semi regularly.

In general, and as is the standard for the general purpose of providing a means to bypass repeated content, skip links seem like a good idea to consider if you have a significantly repeated nav. This would include a nav that is present on every page

This websites attempt

My personal website is a safe place to trial some usage of the technique. Load the page fresh, hit the tab key, and voila:

Skip link screenshot

This comes from the contents of the body element:

<a href="#main-content" class="screen-reader-text skip-to-main-content-link">Skip to main content
</a>
{{ block "header" . }}{{ partial "site-header.html" .}}{{ end }}
<main id="main-content" class="pb5">
{{ block "main" . }}{{ end }}
</main>
{{ block "footer" . }}{{ partialCached "site-footer.html" . }}{{ end }}

Note the anchor link with the href and classes. This appears only when focused visually with the following CSS:

.skip-to-main-content-link {
  position: absolute;
  left: -9999px; 
  z-index: 999; 
  padding: 1em;
  background-color: black;
  color: white;
  opacity: 0; 
}

.skip-to-main-content-link:focus {
  left: 50%; 
  transform: translateX(-50%); 
  opacity: 1; 
}

I tested this with keyboard on Firefox and Chrome Desktop and also Mac VoiceOver on MacOS Desktop and viewing the website in a mobile orientation of a browser.

Sure enough, when you tab or focus down the navigation order, it opens a link with an accessible name that reads out skip to main content, and provides an option to skip the content.

This appears on all pages of my website with the same anchor link pointing to the main content.

If I had a larger menu it would help even more to have this here. Right now, its just a demonstration on my website that does allow skipping a smallish menu.