Quicktips for Skip Links
Problem
2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple web pages. From the WCAG 2.0
Sufficient Techniques
-
Creating links to skip blocks of repeated material using one of the following techniques:
- G1: Adding a link at the top of each page that goes directly to the main content area
- G123: Adding a link at the beginning of a block of repeated content to go to the end of the block
- G124: Adding links at the top of the page to each area of the content
- Grouping blocks of repeated material in a way that can be skipped, using one of the following techniques:
- Providing heading elements at the beginning of each section of content (HTML)
- Using structural elements to group links (HTML)
- Using frame elements to group blocks of repeated material (HTML)
- Using the title attribute of the frame and iframe elements (HTML)
- Using an expandable and collapsible menu to bypass block of content (Scripting)
Additional Techniques (Advisory) for 2.4.1
Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.
- Providing keyboard access to important links and form controls (future link)
- Providing skip links to enhance page navigation (future link)
- Providing access keys (future link)
- Using accessibility supported technologies which allow structured navigation by user agents and assistive technologies (future link)
- Positioning content based on structural markup (CSS)
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)
For more information, contact:
Parker Owens, Web Accessibility Coordinator, EKU, 254 Case Annex, Richmond, KY
(859) 622-2743, parker.owens@eku.edu
