CofC Web Accessibility Guidelines- Rule (O)

(o) A method shall be provided that permits users to skip repetitive navigation links.

Translation: Very often, the same links are included at the top of every page on a site. Sighted people can just skip over them and get straight to the main content but a text reader has to read through them each time a page loads. Even when the links are not the same on multiple pages, having a skip navigation link is useful so that when a user visits your page multiple times they can go to your content without tabbing through all your links. Provide a way for any user to skip over navigation links and move straight to the main content.

What to do: The simplest way to accomplish this is to have a skip navigation link at the beginning of your page that links to the main content of your page. Sometimes web designers feel that having this “skip navigation” link visible at the beginning of every page is unsightly or distracting. It can also be confusing to sighted users since it does not “appear” to do anything. There are several alternatives to using a visible link and they each have pros and cons. Choose the one that works best for you but be aware of the limitations.

A few options

Option 1

Use style sheets to define a class which is not displayed and then set your skip navigation to that class.

Issue: Some screen readers ignore material set to “display none”

Sample code
Place this code in the stylesheet: .skiplink {display:none}
Place this code after your title in the html document: <a href="#skipnav" class="skiplink">Skip Navigation</a>
Place this code before your main content in the html document:<a name="skipnav"></a>

Option 2

Put the “skip navigation” link in your main code and make it the same color as the background or include a transparent graphic with the “alt” tag set to “skip navigation” and link this to your main content.

Issue: Both of these solutions raise the same concern. If the link is invisible, only those using screen readers benefit. Users with motor disabilities often navigate a page using tabs. They too benefit from the skip navigation link but if it is invisible, they don’t have any way to know it is there and cannot take advantage of it.

Option 3

Using style sheets, it is possible to make the link invisible until a user tabs to it. The link will appear when the user tabs to it and disappears when the user navigates away.

Issue: Some browsers may not perform as expected.

Sample code
Place this code in the stylesheet: a.InvisiLink {
font-size: 80%; /*your choice*/
color: #dad9fb; /*this should be the same color as your background*/
text-decoration: none; /*your choice*/
}
. InvisiLink:active, .InvisiLink:focus {
color: #0000FF; /*this should be the color you want the link to appear when the user tabs on it*/
text-decoration: underline; /*your choice*/
}
Place this code after your title in the html document: <a href="#skipnav" class="InvisiLink">Skip Navigation</a>
Place this code before your main content in the html document:<a name="skipnav"></a>

Other sites for instruction

Each of the sites below demonstrates various ways to implement skip navigation.

http://www.webaim.org/techniques/skipnav/

http://www.jimthatcher.com/webcourse4.htm