Adding Skip Navigation Links

It is simplest to put a text link at the top of your page, which links to a bookmark at the beginning of the main text. There are two potential problems. First, you don't want to see the hyperlink. Second, skip navigation links don't always work correctly within tables. To solve the first problem, a hyperlink can be made invisible with a cascading style sheet, or a transparent gif file may be used.

• Using a text-based skip navigation link
• Use FrontPage to add a text-based skip navigation link
• Using a transparent image as a skip navigation link
• Using tables to manipulate the reading order of a page

Using a text-based hyperlink to link to the main text.

The link is placed at the top of the web page, or at the beginning of the HTML code.

There is a bookmark just before the heading Zoology 1. The code for it is:

The cascading style sheet includes a class called .invisible which prevents the display of an element:

When the Skip Navigation Link is activated, the focus of the page jumps to the bookmark named main. This allows screen reading technology to bypass all the navigation links on the page.

Warning! Bookmarks are case sensitive.

Using FrontPage to Create a Bookmark and Skip Navigation Link

To create a bookmark in Front Page, open your web page, position the cursor just before the text where you want the bookmark, click Insert -> Bookmark, then type in the name of the bookmark.

To create the link, type in the desired text at the beginning of the page, such as "jump to main text" or "skip navigation links", select that text, click Insert -> Hyperlink, then select the bookmark from near the bottom of the dialog box.

Create your cascading style sheet and link it to your document. For more information on how to do this, try the CSS Exercise. Edit it to include the following line:

To hide the skip navigation link on your web page, select the text, from the formatting menu, click the down arrow beside the style box, and select invisible.

Now preview your web page. The skip navigation link will still be there for screen reading technology to access, but it won't be displayed on your monitor!

Using a transparent image file to link to the main text.

You may prefer to use a  very small, 1 pixel by 1 pixel, transparent graphic placed near the beginning of the page, with a link to the main text. You may create your own or use ours. Simply right click on the hyperlink spacer.gif and choose Save Target As, and select a folder in which to store the file.

In this example, the spacer.gif file has been inserted at the beginning of a web page. It is critical to include an alt tag on this image.

Using Tables

One of the sample pages uses tables to prevent navigation links on the left from being read before the main text by screen reading technology. Below is an illustration of what the page looks like. An "invisible" text based skip navigation tag precedes the three tables.

            Skip Navigation Link

	Main Text
Many Links

The screen reading technology reads tables one cell at a time. It begins with the top row, reads the contents of the cell on the left, then the contents of the next cell, moving across to the right. After it completes one row, it starts on the next. The tables above would read:

Skip Navigation Link, Banner Image, Department Name, link Cuesta Home, link DSPS, link Web Access, Link Link1, Link Link2, Main Text, Link Many Links.

By placing a 1x1 pixel transparent GIF in the blank cell above "Many Links", the blank space becomes much smaller and less obtrusive. The code for these tables, as well as the necessary skip navigation link follows:

Return to Top | Web Accessibility home page

Page maintained by dspsweb@cuesta.edu. Last modified: 11/06/2003.