Tutorial: CSS Skip links By Adrian Rayfield
Last edited: 07.10.2006
How to implement CSS Skip links - option 1 (intermediate 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 styles the link the same colour as the background of the page in which it resides, in this case white (#ffffff), you can of course change the colour to match your own background colour. Firstly we will add some CSS then we will define a class for the skip link.
Step 1:
Create a style for the skip link, something similar to;
a.skip-link {color: #FFFFFF; background-color: #FFFFFF;}
The HTML.
Step 1:
Now we add the HTML to our page. We add a link to an internal page anchor - in this case content for the main content of the page. Place the anchor at the start of your main content;
<a name="content"></a> or <a id="content"></a> for XHTML.
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="#content" title="main content" id="content" name="content" class="skip-link"></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!
Now we apply the class to our skip link as follows, this is then placed as soon after the body tag as you can;
<a href="#content" class="skip-link">Skip to main content</a>
Moving on
We can take this a stage further. We will style the link so it's visible on focus via tabbing (using the tab key on the keyboard) or when the mouse moves over the link.
The CSS
Step 1:
All we are going to do this time is add to the CSS you have already written. We now need to add the active and hover rules;
a.skip-link:active {color: #000000; background-color: #FFFFFF;}
a.skip-link:hover {color: #000000; background-color: #FFFFFF;}
a.skip-link:focus {color: #000000; background-color: #FFFFFF;}
The HTML
Step 1:
The html stays exactly the same as above.
The result should now look like the following image when you tab onto the link:
You could go further and have the skip link so it's always off the screen. Negative positioning does this;
a.skip-link {position: absolute; left: -50em; width: 10em;}
However we prefer to see skip links when they have focus so that physically disabled and not just assistive devices such as screen readers can use them.
This has been a brief introduction to implementing skip links, There is a more complex way of doing skip links and this is what we use here on Rayfields Accessibility. Read the next tutorial to discover how we have done it.
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.
