View/print complete tutorial.	Page 8 of 10.	Return to Contents
Beginning   PREVIOUS || NEXT   End

Skip Navigation Links

Many web designs employ a set of repeated navigation links that appear at the top or to the left side of the page. Whenever the page is loaded or reloaded, screen readers must read all of this repeated content before getting to the main content at the center of the page. An in-page link (also called a bookmark or anchor) gives the user a quick way to "jump over" or "skip" this repeated navigation and jump to the main body of the page.

Since skip navigation links are primarily for use by visually impaired users browsing with a screen reader, they do not have to be visible or accessible to other users (although they may be). Many designers hide the skip navigation link using an invisible GIF or by coloring the text of the link the same color as the background. Our practice site uses an invisible GIF.

OSU Standard: A method shall be provided that permits users to skip repetitive navigation links.

Insert a Skip Navigation Link

There are two parts to a Skip Navigation link: the link and the anchor where the link is pointed to. It is usually a good idea to insert the anchor first, then create the link.

Insert an Anchor

1. Place the cursor at the beginning of the page content where you want the link to "jump" to.
2. From the INSERT menu, choose NAMED ANCHOR.
   OR press CTRL + ALT + A on the keyboard.
3. The NAMED ANCHOR dialog box appears. Name the anchor (e.g. "content") and press OK.
   
4. An anchor symbol appears in the design view where the anchor is located. Note: this is for designer reference only. The anchor will not appear on the web page.

Insert a Link to the Anchor

5. Place the cursor at the beginning of the page, as close the BODY tag as possible (use the CODE VIEW, if needed).
6. From the INSERT menu, choose IMAGE. OR use the insert image button on the COMMON toolbar.

7. Select the invisible GIF file (accessibility_image.gif) [you must create this file outside of Dreamweaver using a picture/image editor software, such as Fireworks or Photoshop].
8. In the IMAGE TAG ACCESSIBILITY ATTRIBUTES dialog box type the ALTERNATE DESCRIPTION: "skip navigation".
9. In the PROPERTIES box, in the LINK box, type the location of the anchor preceded by a pound sign: "#content". The pound sign indicates an in-page link.
   

View/print complete tutorial.	Page 8 of 10.	Return to Contents
Beginning   PREVIOUS || NEXT   End