Skipping Repetitive Navigation
This article defines the often overlooked provision of Section 508 dealing with repetitive navigation. It also
shows you how easy it is to make your site compliant with the rule.
The Law:
Section 1194.22, paragraph (o) of Section 508 of the Rehabilitation Act requires Federal Agencies to put mechanisms in place
which will allow users with disabilities the option of skipping repetitive navigation.
A method shall be provided that permits users to skip repetitive navigation links
What it Means:
Visually impaired or blind persons rely on screen readers and interpreters to read web page content.
These readers, such as IBM Home Page Reader and JAWS, read HTML source code from top to bottom and
make it audible.
Since it is common practice for web developers to place navigational links on the top or side
of web pages, screen readers will typically read these sections first, every time a page loads.
If there is no mechanism to skip navigation links, disabled viewers must labor through
redundant, sometimes lengthy lists of links on every page they visit. Providing a means to skip repetitive
information allows disabled users a more enjoyable and less frustrating task of finding
information on the web.
How can I make my site compliant?:
The anchor tag is an effective and easy solution. We use a simple anchor tag, name it and create a target to it within the same
page. When a user with an assitive browser comes to the anchor tag, he selects it and jumps past any repetitive information and continues
to the main content of the page.
Instead of placing a filename in the hypertext reference attribute ("href") we place a pound
sign "#" and a named value.
<a href="#skip">Skip repetitive navigation</a>
In order for the link to work, we must place a reference to the named value elsewhere in the document.
<a name="skip"></a>
When the link is selected, the browser jumps to the named target, skipping any content in between.
Common Solutions:
The important thing to remember about incorporating these links into your site, is that the links need to be placed so that
they appear (in a screen reader) before the navigation or other redundant information. To accomplish this, make sure you place the
anchor tag link immediately after the tag and the target anchor right before the main content of the page begins.
Since many users do not need a mechanism to skip repetitive links, web developers, typically hide these links in order to
preserve the visual appearance of a page. Depending on your page design, here are two solutions that allow you to keep your page
design intact.
-
The easiest solution is to add text links to the top of each page in your site. To make the link invisible, simply change the
font color to match the color of your background. If your background is white, the following code would work:
<html>
<head><title></title></head>
<body>
<a href="#jump"><Font color="white">go to main content</font></a>
<a href="navigation1">navigation 1</a>
<a href="navigation2">navigation 2</a>
<a href="navigation3">navigation 3</a>
<a name="jump"></a>
<h1>Main Content</h1>
</body>
</html>
- Another common solution for pages that contain header or side graphics is to add a small,
transparent image in the header graphic. The image is embedded in the site design so that only users
with alternative browsers or other assistive technologies will know it is there. The code is the same as
above, except we throw in the image tag <IMG>
<html>
<head><title></title></head>
<body>
<a href="#jump"><img src="jump.gif" alt="go to main content"></a>
<a href="navigation1.html">navigation 1</a>
<a href="navigation2.html">navigation 2</a>
<a href="navigation3.html">navigation 3</a>
<a name="jump"></a>
<h1>Main Content</h1>
</body>
</html>
Show me Some Examples:
Here are two examples of sites that use . Take a look at the source code on the links below. To view the code, select View
from the menu and select Source if you are using IE or select Page Source if you are using Netscape.
- http://www.epa.gov/epahome/newsroom.htm
The EPA site uses a hidden graphic in it's header to link to the main content of every page. It is similar to the second solution
listed above
- http://www.usaid.gov/about
The USAID site incorporates a simple hidden text link at the top of its pages. The text link is
hidden by coding the font color to match the background. It is similar to the first solution listed above
Related Links:
For related or additional information, try these links.
Section 508 Guidelines
Section 508 website
Article on Assitive Technology and Alternative Browsers
Back to Top ^
|
