Quick Tips for Skip Links

Problem

Blocks of repeated material, such as navigation menus and document headers, are marked up so that they can be bypassed by people who use assistive technology or who navigate via keyboard or keyboard interface. [V]  From the WCAG 2.0

Who needs skip links?

People using screen readers, the mobility impaired, others not using a mouse, and cell phone/pda users.

Best Solution

Display the skip navigation link as a normal link. Be aware some people will be confused by this mystery link that doesn't appear to do anything because it is an internal jump.

Another solution in addition to this one is the extended use of headings. Several browsers can now tab by heading as easily as by links.

Other Solutions

Display the link on cursor focus using CSS. The link would be invisible until someone tabs to it. Some might miss the link with this method because the link disappears when the tab moves the cursor focus to the next link.

Accesskeys allow the user to jump to anchors using the alt-key and another key combination. The biggest problem with accesskeys is informing the user what keys to use. No standards exist for key combinations.

Link tags can be used for text browsers and assistive technologies to provide links for next and previous pages.

Tabindex specifies the order of the links when tabbing through. Using tabindex, the user can jump to the links in the content first, then go back to navigation at the end. The problem with this method is that the path is predetermined and not based on user needs.

Incorrect (but creative!) Techniques for Hiding Skip Links

Display: none or Visibility: hidden (Most alternative browsers do not display or read text)

Create invisible text using CSS or the font tag (This makes the link unavailable to the mobility impaired and cell phone/pda users. Plus, the site may be penalized by search engines.)

Make invisible link by wrapping a href tag around a 1 x 1 clear spacer.gif. Use the alt text to describe the link (Not read by some Jaws versions. Not available to mobility impaired)

Provide content first in the code using div tags (Then you need a skip link to the navigation)

Use the Fahrner Image Replacement method to hide text (Not visible to mobility impaired)

Positioning the skip link outside the browser window using CSS (Only read by aural browsers, not available to other users)

Creating very small text link that users won't notice (Mobility impaired can't hit it with a mouse)