Creating your skip links

In part one of this series, I defined what skip links are and how they function. In part two I discussed the two theories about the skip link, and if they should be shown or not.

This is the third and last article on the series and I am going to show you how to create hidden skip links for your site. If you want to show your skip links, there are numerous methods to do so, and I won’t cover them here as each site design is unique. The basic code will still apply so you will need to style it to fit into your site accordingly.

I will use my site here as the example for creating and styling hidden skip links. The method used relies upon semantic xHTML code with CSS for the styling. All we are going to do is add a couple of id’s to an unordered list and move it off screen. We will also make it accessible so that it will appear if “active” to the user.

Create the list

When we are ready to incorporate skip links into the site, take a look at how your code is written. Do you have each section prepared for the skip link to function? Is your main content area clearly separated from your sidebar? What about your footer and your navigation?

This is where it is critical to use good semantic markup with clearly identifiable id’s for your site. Remember, however, that an id can only be used once on a single page.

Here is how my list looks for

<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>

Now, there isn’t much to it, just an unordered list of items. One note is that you want to make sure that this list is the first thing on your page, just below the opening <body> tag. This will allow for it to be the first item shown to screen readers and other mobile devices so that they don’t have to go through all of your content or navigation to be able to use the skip links.

Also, while we are talking about the opening <body> tag, let’s go ahead and put id="top" here. This will be for a skip link that you can place at the bottom of your site in the footer section, or at the bottom of your content area. This will allow for people to quickly navigate to the top of your page or site without having to scroll if your article is long. This should be a visible link.

What does it mean?

Let’s break the code down a little bit to explain what it is doing.

<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>

The beginning <ul class="access"> that is assigned can be titled anything you like. I just called it “access” for my purposes of remember what it is describing.

The list items are the skip links. This is where you will tell the link to direct to a specific portion of your site. The first option I want to offer is a skip to content. The internal link specifies a location of #content and on my main content area, I have the <div id="content"> to “catch” this internal redirect.

When you place a “#” sign prior to an internal link, it is telling the browser to look into the rest of the code of the site and find the “id” that matches it. This is where the ease of semantic code will really help. If you already have an id in use for your main areas, then just match the newly created skip link list to redirect to them.

You can repeat this process of adding or deleting items to your main skip link area, and then matching them to specific areas of your site.

As for the visible skip link that goes on the bottom of your page, the <body id="top">, you can add a skip link to the section of your footer or bottom of your content area that says “top” or something else that signifies that it is a link that will take the person back up to the top of the site or page.

It would look like this:

<a href="#top"> top </a>

Pretty simple stuff so far? Let’s style the hidden links next!

To the CSS

As for the CSS that I use on my main skip link section, all we are doing is moving the “access” div off of the screen, and making it visible when it is “tabbed” upon. Let’s look at the CSS:

ul.access, .access {
	position: absolute;
	top: -9000px;
	left: -9000px;
	z-index: 9;

With this part of the CSS, we are giving the hidden skip link an absolute position off screen to the left of 9000 pixels. You can set this to what ever you desire, but this is a nice number to ensure it is out of sight. The z-index also ensures that it will remain visible above anything that might be over top of it.

Now for some CSS magic to make it reappear when it is active on the page:

ul.access a:focus, ul.access a:active {
	position: absolute;
	top: 9005px;
	left: 9005px;
	background: #690;
	color: #fff;
	padding: 5px;
	font-weight: bold;
	border: 2px solid #000;
	width: 10em;
	z-index: 9;

With this coding, all we are doing is telling it to reappear when the link receives focus, or is “active” for Internet Explorer. As you can see we are telling it to show up 9005 pixels from the left and 9005 pixels from the top. Remember, in the prior code to hide it we were telling it to hide by 9000 pixels, so in essence we are positioning this link area 5 pixels from the top and left.

The rest of the styling is for color, border and other styles that you can adjust or modify to integrate it more into your site.

In conclusion

I hope you have enjoyed this series on skip links and have found it useful and easy to integrate into your own site. If you have any questions, please let me know. This simple method will allow for better usability and accessibility for your site and only takes a few moments to put it into action.

Leave a Reply

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