Tutorial: CSS Skip links By Adrian Rayfield
Last edited: 07.10.2006
How to implement CSS Skip links - option 2 (Advanced level)
Following on from the article Skip Links, this tutorial explains how to add and style your skip links. This tutorial assumes you know how to code HTML and CSS and are altering and adding code.
Please note: Some developers use display:none to hide their skip links, this hides the links from assistive devices also, such as screen readers, and the links are not read out. Please do not use display:none to hide your skip links.
What you will need for this tutorial
You will need:
- An HTML or XHTML page prepared and ready to view
- A CSS file - external or block CSS in the head of your HTML file
You will be adding code to both your HTML and CSS files, firstly the CSS, so get that loaded ready now.
The CSS
This method hides the skip links until focus is on them when they appear in a highlighted box, they can be positioned anywhere on the page when they appear to suit your page.
Firstly ensure you have styled your link and visited link style, something similar to:
a:link { color: #0000FF; text-decoration: underline}
a:visited { color: #FF0000; text-decoration: none}
Now we need to write a couple of 'classes' to style the links which we will place in our HTML document later. The first class is to hide the skip links and the second is to show them and also to style their look and position.
Step 1:
Make a class and call it something like skip-link, this will make it easier to identify later. The class needs to be for a link (a) and also a span. You should have something like;
.skip-link a,.skip-link span {}
Next you need to position and hide these, so add the following to the above class;
position: absolute;
overflow: hidden;
Next we give it height and width,
width: 0;
height: 0;
Finally for this class, we move these off screen by giving a negative position;
top:-4em;
left:-3em;
So your completed style should now be looking like this.
.skip-link a,.skip-link span{
position: absolute;
overflow: hidden;
width: 0;
height: 0;
top:-4em;
left:-3em;
}
Step 2:
Now we need to create a class so the links are visible when the link is in focus by a keyboard user.
We will use the same name as before for the class and set the active and focus rules.
.skip-link a:active, .skip-link a:focus {}
Next we position and make visible the links;
position: absolute;
overflow: visible;
Now we set the width and height;
width: auto;
height: auto;
So now we have done the same as we did the first time, but this time we have made the links visible rather than hidden when the link is in focus.
Step 3:
Now we add some styling for the links. The following can be to your own taste or to fit in with the site. To move the links around, alter the top and left values.
background-color: #ffff00;
color: #ff0000;
top: 6em;
left: 1em;
padding: 5px;
border: 2px solid red;
font-weight: bold;
So your second completed style should now be looking like this;
.skip-link a:active, .skip-link a:focus {
position: absolute;
overflow: visible;
width: auto;
height: auto;
background-color: #ffff00;
color: #ff0000;
top: 7em;
left: 1em;
padding: 5px;
border: 2px solid red;
font-weight: bold;
}
Now you can save this in your external style sheet or your HTML file if you have used block CSS in the head of your HTML page. Next is the HTML.
The HTML.
Step 1:
For the HTML we set a div to hold the skip links and add the class to the div. The following code should be placed as soon after the body tag as you can;
<div class="skip-link</div>
Step 2:
Next we add the links.
<div class="skip-link"> Skip to: <a href="#main" title="Skip to page content">Page content</a> - <a href="#menu" title="Skip to Global Navigation">Global navigation</a>.</div>
Step 3:
Now for the final stage we add the spans and the final code should now look like this;
<div class="skip-link"><span>Skip to: </span><a href="#main" title="Skip to page content">Page content</a><span> - </span><a href="#menu" title="Skip to Global Navigation">Global navigation</a><span>.</span></div>
Step 4:
Add the named anchor - in this case main and menu - to the locations you wish to skip to.
<a name="main"></a> or <a id="main"></a> for XHTML. Do the same for the menu named anchor changing the name of the anchor from main to menu.
Note:
Because of a bug in Internet Explorer whereby focus may change but the input focus doesn't, the links may not work as you intend with Internet Explorer 5.5 and 6. There is a solution for this;
<a href="#main" title="main content" id="main" name="main"></a>
This code can be used instead of the named anchor above and placed at the beginning of your main content. By giving the named anchor as an empty link once the focus has been moved to this anchor, Internet Explorer will tab onto the next link to follow it rather than jump to the skip link again. Try it out!
The code here simply links to two locations on the page, main (main content) and menu (global navigation), you can of course add more skip links to other locations, such as a search box or sub menu etc.
Now save your HTML file, open the file in a web browser and use the tab key. You will now see your links appear when focus is on them.
The result should now look like the following image when you tab onto the link:
The code given is all valid XHTML 1.0 strict and valid CSS.
Tutorial written and copyright held by Adrian Rayfield of Rayfields Accessibility © 2006.
Did you find this article / tutorial useful, please give us your comments.
For more information on Rayfields Accessibility Consultancy and Web Development Services please contact us by telephone on 0845 0037 508 or email : accessibility@rayfields.co.uk.
