Skip Repetitive Navigation Links - Checkpoint (o)
The law states:
"A method shall be provided that permits users to skip repetitive navigation links."
If your navigation links come before your main content of your web site, you will need to provide a way to skip these links. This is so your users do not have to tab manually through every link to get to your main content.
If your main content comes before your navigation links, you should provide a way to skip your main content. This is so your users can get to your navigation links without going through all of your main content.
Section 508 does not require you take care of this second situation, but it will help your users navigate your web site better. There are two general ways of doing this: an invisible link done with CSS or a 1x1-pixel image that links to your main content or navigation links. You want to keep these links invisible to users, who are not visually impaired, because they can visually skip content and should not be confused with these additional links.
CSS Method
Depending on which kind of content your are skipping, define the appropriate CSS style:
or
Next, insert the .skiptomain or .skiptonav link near the beginning of your web site. Replace "maincontent" or "navlinks" with the appropriate anchor name for your content. Name the link something like "Skip navigation links" or "Skip to main content" if your are skipping the web site's navigation links. Name it "Skip main content" or "Skip to navigation links" if your are skipping the web site's main content. A good place for your skip to links is right after your web site's banner or main heading.
or
Example of CSS Skip to Navigation Link
This web site's navigation links come after the main content. The web designer provides hidden "skip to" links for increased accessibility.
When CSS is turned off, the links are no longer hidden. As you can see, the skip to links are at the beginning of the web site.
Click here for the Dreamweaver Tutorial
1x1 Pixel Image Method
If you do not want to create a CSS style sheet, you can accomplish the same thing with an "invisible image" only the screen reader will read. Define a 1x1-pixel image as a link in your code. Any image will do since a 1x- pixel image will be virtually unnoticeable to a person. Put the link at the beginning of your web site. Replace startcontent with the appropriate anchor name.
Click here for the Dreamweaver Tutorial
Helpful Web Sites