Javascript Skip Links

Skip links are a requirement of Section 508. And can be accomplished in several different ways. In this method, we will use the JavaScript to create a link that surfaces when the user tabs into the control. Notice as you tab through this page, the skip navigation link appears just at the top of the AOL logo in a place where it does not obstruct the visual look and feel.

A skip link should be the first thing located at the top of the page, as the first tab stop. And it should forward focus to a location directly above the main content of the page.

Example 1:

Skip Navigation

AOL Logo

This is a heading



This is a line of text

content text

Code


<script type="text/javascript">
function toggle(n)
{
  if (n == 1) 
    {
      document.getElementById("n1").style.zIndex = 1;
    }
    else
    {
      document.getElementById("n1").style.zIndex = -1; 
    }
}
</script>
<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;
    color:red;"> 
Skip Navigation </a> 
<div>
<div style="width:100%; left:1; background-color:#58A4D8;">
<img src="aol_logo.gif" alt="AOL Logo">
</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>

Works With

JavaScript Skip Link
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Comments are closed.