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.

<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:

• WCAG 2.0 SC 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)

Skip links are a requirement of Section 508. And can be accomplished in several different ways. In this method, we will use the CSS focusable property to create a link that surfaces when the user tabs into the control.

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.

<STYLE TYPE="text/css" MEDIA=screen>
.visuallyhidden { 
position: absolute; 
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
margin: -1px;
border: 0; 
padding: 0; 
width: 1px;;
height: 1px; 
overflow: hidden; 
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { 
clip: auto; 
height: auto; 
margin: 0; 
overflow: visible;
position: static; 
width: auto;
}
</style>
<a href="#content" class="visuallyhidden focusable" title="Skip to main content.">Skip to Main Content</a>
<h1> This is a heading </h1>
<input type=text> <br/>
This is a line of text <br/>
<a name="content">Content begins here.</a>   

Works With

Using ARIA SELECTED

Browser	Screen Reader	Results
IE 9	JAWS 12	Yes
FF 4	JAWS 12	Yes

Standards:

• WCAG 2.0 SC 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)