search
top

What are skip links?

A simple and easy way to improve your sites usability and accessibility is to incorporate skip links into your site. These are also known as jump links, or internal links. You might be wondering what their purpose is and if they are really necessary.

In this first article of three parts, I will describe what a skip link is and how is can improve your site with minimal effort. Skip links can be placed into any site, not just a WordPress blog. The benefits will make your site more accessible and improve usability for all users.

Let’s get started!

To get started, scroll back up to the top of this page and press the “Tab” key. Go ahead, I’ll wait for you.

Great! You’re back! Did you see the green box in the upper left corner? It should have looked like this:

Screenshot of jumplinks

I have chosen to hide the skip links on this site to only appear when they are “active” or gain focus by using the “tab” key. However, they will also be one of the first things visible to a screen reader. This allows for a user to quickly navigate to the portions of the site that they want to quickly move to, such as the main content or navigation.

Other sites, such as Roger Johanssons 456 Berea Street have chosen to show their skip links.

456 Berea Street screenshot

Many sites also incorporate skip links on the bottom of their site, or long content pages that point back to the top of the page. This saves a lot of scrolling time, easily allowing for a user to move back to the top of a page in one click.

So why use skip links?

One of the main reasons to use skip links, whether you have them hidden or not, is to increase the accessibility and usability of your site. The skip link allows a “Tab” key user or screen reader user to quickly move to another part of the page. These links also depend on how your site is coded, such as if your main navigation is before or after your content sections.

If your content is before your navigation in your code, such as the case on a lot of right sided navigation sites, you would want to include a skip link to the navigation of the site. If your navigation is before the main content of the site, you might not want to include it, but it won’t hurt if you do.

Skip links are just internal links for your site that allow the user to “skip” to a certain portion of your site without having to go through the same content over and over again for each page.

Let’s take a quick look into what I have for mine here at ejcross.com.

<ul class="access">
	<li><a href="#content">Jump to Content</a></li>
	<li><a href="#navbar">Jump to Navigation</a></li> 
	<li><a href="#footer">Jump to Footer</a></li>
</ul>

Not much to it! Just a simple unordered list of internal links. I also use a skip link at the bottom of this site that will allow for a quick return to the top of the page.

An example

Let’s say that you have a user come to your site that uses a screen reader to hear the content. Imagine if you can that user has to listen to all of the content on your main page before they can then get to the main navigation to hear what the options are. How long do you think they will be on your site? Will they come back?

Skip links should be the first thing on your sites coding, just after the beginning <body> tag. This way, when each page is loaded, the user has the option to skip to the navigation, main content section, or where ever else you decide you want to allow your users to skip to.

Man jumping

Another example would be for someone that has dexterity issues with a mouse. As the internet user population increases in age, using a mouse can be difficult for someone with arthritis. Maybe using the “Tab” key is a better option for that user. You wouldn’t want to alienate a user that can’t use a mouse, would you?

So, by placing the skip links on your site a “Tab” user can then select the link to the section that they wish to quickly access, and be able to do so easily.

What is required

If your site is using good semantic markup, creating skip links will be easily accomplished. This site has the major sections divided by div’s with id’s such as header, content, sidebar and footer to help divide and control the layout. This article isn’t to debate the issue of CSS or semantic markup, maybe that will be another article later.

By using an internal link, all you are doing is creating a link to a specific portion of your page layout. If you are using id’s to specify a certain portion of your site, then you are almost done!

When someone comes to the skip link and select it, they are taken to that certain portion of your site. If they are wanting to get to your navigation area, instead of having to go through all of the other links and content in your content area, they are now able to “skip” to the navigation.

In conclusion

This is the first part of my series on using skip links. I hope you found this article interesting and insightful and do plan on coming back for the other two parts in the series. I will discuss the debate on whether skip links are really useful and should be visible or not, and in part three, I will show you more on how to code skip links into your site for maximum benefit.

No Responses to “What are skip links?”

Trackbacks/Pingbacks

  1. The debate over skip links | ejcross.com - [...] my first article entitled “What are skip links?“, I introduced what skip links are and how they serve a…
  2. Creating your skip links | ejcross.com - [...] part one of this series, I defined what skip links are and how they function. In part two I…

Leave a Reply

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

top