Archive for the ‘Section 508’ Category

Javascript Skip Links

Monday, June 20th, 2011

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:

CSS Hidden Skip Links

Monday, June 20th, 2011

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.

Example 1:

Skip to Main Content

This is a heading



This is a line of text

Content begins here.

Code


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