Using a Visually Hidden Skip Link to Create Accessible Pages

Donald F. Evans

Feburary 26, 2007

Question

How can I best use a skip link to create as little impact on the visual user but also provide a good experience for the Screen Reader user and the Keyboard only user?

Answer

John Avilla provided this very clever use of a non-visual skip link. In the example below, the link remains hidden just above the AOL Logo until the user tabs to the link at which point it is surfaced. This makes it accessible to the screen reader user, the maginifier user, and the keyboard only user while at the same time not changing the visual presentation to the main stream user.

Example

Skip Navigation

This is a heading


This is a line of text
content text

Code: 

<html>
<head> <title> AOL.com </title> 
<script type="text/javascript">
function toggle(n)
{
//alert('on');

if (n == 1) 
{
  document.getElementById("n1").style.zIndex = 1;
}
else
{
  document.getElementById("n1").style.zIndex = 0-1;
}
}
</script>
</head>
<body>
<a href="#content" id="n1" tabindex="0" accesskey="s" onFocus="toggle(1);" onBlur="toggle(0);" style="z-index:-1; font-size:.8em; position:absolute; display:block; left:10;"> Skip Navigation </a> 
<div>
<div style="width:100%; left:1; background-color:#58A4D8;">
<img src="aol logo.gif">
</div>
<h1> This is a heading </h1>
<input type=text> <br />
This is a line of text <br />
<a name="content"> content text </a>
</div>
</body>
</html>

Other Resources