webecho designs : accessibility statement
Skip to .../ Jump to ... links
Why provide skip to ... links?
Skip to ... links make your website more accessible by offering an alternative method of navigation to your visitors. The two main types of visitor that benefit are:
Screen reader users
including users benefit by being able to skip to the main section of your webpage quickly ... can you imagine how annoying it would be to have the same things read to you each time you visit a different page on a site? Providing these links allows them to quickly reach the content or navigation (or as many different areas as you wish to cater for).
Keyboard users
Whether using the keyboard to navigate is a personal preference or a physical necessity, skip links can make these users lives easier and quicker.
Try out my skip links
Try Tabbing around the page now and you should see these links appear at the top left of the browser window. Notice they only appear when they are focussed on .. that way it doesn't spoil the design of your page.
Where do I put them?
To be of any use they must come as the first item after the <BODY> tag, they must be immediately available to the user.
Setting up skip links
There are different variations on this naturally, heres the XHTML and CSS for the skip links on my page:
XHTML
<ul class="skip"> <li><a href="#main" accesskey="m" tabindex="1">skip to content </a></li> <li><a href="#nav" accesskey="n" tabindex="2"> skip to navigation </a></li> <li><a href="access keys.htm" accesskey="a" tabindex="3"> access keys </a></li> </ul>
CSS
.skip{position:absolute;left:-50px;top:-50px;}
.skip li{text-align:center;padding:0 5px;}
.skip li a:focus{position:relative;top:50px;left:50px;z-index:1;}
Edit for IE
I made a mistake when i first posted this - I didn't account for IE. It's a simple fix - I have just added .skip li a:active to the last line
.skip li a:focus, .skip li a:active{position:relative;top:50px;left:50px;z-index:1;}
Lets take a look at each part:
The XHTML is pretty standard, it's just an unordered list containing the links - ignore the accesskey and tabindex for the moment.
The CSS is used so that those useful links don't have to appear at the top of every page and only appear when they are focussed on.
.skip{position:absolute;left:-50px;top:-50px;}
This line sets the position of the list initially, I don't want it visible all the time so I have positioned it absolutely and used negative margins to ensure it sits 'off page'.
We'll ignore the second line as this is purely for aesthetics and provides no functional value.
.skip li a:focus, .skip li a:active{position:relative;top:50px;left:50px;z-index:1;}
This last line defines what happens when the link is focussed on (i.e. when someone's tabs to it). Note the .skip li a:active to make IE 'play along'.
position:relative is used to position the list relative to the <BODY> top and left position it so it appears on the page.
I included a z-index to ensure that they appear above any other elements that I have on the page.