«
»

CSS Hidden Skip Links

Jun 20th, 2011 at 1:11 pm

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:

In Accessibility, Best Practices, Section 508, WCAG. Both comments and pings are currently closed.

Comments are closed.