Section 508 Compliance

HTML Coding Tutorial

Skip Navigation Link

(o): A method shall be provided that permits users to skip repetitive navigation links
Explanation: For those who use screen readers or other types of assistive technologies, however, it can be a tedious and time-consuming chore to wait for the assistive technology to work through and announce each of the standard navigational links before getting to the intended location
Importance: To avoid this problem, developers can include a simple "skip navigation" link somewhere near the top of the page (preferably before any other content). This in-page link then directs the screen-reader to the specific in-page link.

Bad Example

1.  Not including a Skip Navigation link
...
<a href="first.htm">first</a>
<a href="second.htm">second</a>
<a href="third.htm">third</a>
...
<a href="last.htm">last</a>
<p> Content of the page
In this case, the screen-reader will read every single link on the page before actually reading the content of the page.

Good Example

1.  Using Skip Navigation to by-pass navigation links
...
<a href="#content" title="main content">Skip Navigation</a>
<a href="first.htm">first</a>
<a href="second.htm">second</a>
<a href="third.htm">third</a>
...
<a href="last.htm">last</a>
<p> <a name="content"></a> Content of the page
Here the user can select the Skip Navigation link and head directly into the main content of the site instead of listening to all the links.

Do-It-Yourself Fixes

When adding your Skip Navigation link, there is one important thing to remember: When you create your link, be sure to include the title attribute. When the T&IR department runs the Accessibility software, it verifies that a skip navigation link is in place by reading the title. If the program reads "main content" in the title attribute, it knows that the link is Skip Navigation and will pass this section of the accessibility check.

So be sure to always include title="main content" in your Skip Navigation link.

Instead of using a text link, you can also use an image as the Skip Navigation link. You would code the link exactly the same as above. But instead of typing in Skip Navigation as the link, you would insert an image, like so:

<img src="blank.gif" alt="Skip Navigation" border="0" height="0" width="*">

For the width attribute, you can make it as large or small as you want. You preferably don't want it too large though. Using an image is the best choice if you don't want to display the Skip Navigation link on your site, but still have it accessibile.