Implementing Rule O
§ 1194.22 Web-based intranet and internet information and applications.
(o) A method shall be provided that permits users to skip repetitive navigation links.
What Navigation Links Are Repetitive?
If you are designing well, and are using a template (e.g., a set of fixed design
elements) for layout, then there should be, in one or more areas of the page,
collections of repetitive links. These links are repetitive in the sense that they
appear in many pages on the Web site. In IRISM, for example, there are two
sets of repetitive links on each page. The first set consists of four links in a
horizontal bar near the top of the page, and the second set, seven links presented
vertically in the left-hand column. Both sets can be skipped using one link going
to the main content, which starts in the central column with the <h2>
heading. The occasional third set of repetitive links, such as the links to the individual
rules for Section 508 displayed in the right-hand column in the "Implementing
Section 508" section pages, can also be skipped.
On the other hand, other pages contain annotated links as part of the main content. while these links follow one another, they form the purpose of the page, and should not be skipped. This is the case for the IRISM's WebZine "Accessibility" page (go to Accessibility page).
Some people advocate repeating the top links on the bottom of the page. I don't think this is necessary if the page is small. It's not a Section 508 requirement. It's when the page gets really long that having the links on the bottom makes it easier for the user to find them, instead of having to scroll back up to the top of the page. This is a usability issue, not an accessibility issue, and is related to the way the page is designed. If the page could be broken up, then this would be a non-issue. If the links are repeated, however, then the user would need to tab through the links to get back to the top of the page; a method to skip the bottom links would be needed also.
Methods of Skipping Repetitive Navigation Links
1. Create a normal link and display it as part of the link set.
Code:
<a href="#main">Main Content</a>
<a href="link1.htm">Link 1</a><br>
<a href="link2.htm">Link 2</a><br>
...<br>
<a href="linkn.htm">Link n</a><br>
...<br>
<a name="#main">Main Content Title</a>
2. Create a one-pixel transparent GIF file, and include as a link with a title such as "Skip Navigation Links and Go to Main Content", "Skip to Main Content", "Main Content", or "Content".
In the above example, the skipover link is invisible, and extremely difficult to find using the mouse. Someone using assistive technology would have less difficulty!
Code:
<a href="#main"><img src="invisiblepixel.gif" alt="Main Content" width=&1" height="1" border="0"></a>
<a href="link1.htm">Link 1</a><br>
<a href="link2.htm">Link 2</a><br>
...<br>
<a href="linkn.htm">Link n</a><br>
...<br>
<a name="#main">Main Content Title</a>
3. Create a normal link, but use styles to make it invisible. Three ways:
- style:
.invisibleitem {visibility: hidden}, which causes the element not to be displayed, but still leaves the space where the element would display; - style:
.invisibleitem {display: none}, which causes the element not to be displayed, and does not lay out space for the element; I have been informed, however, that JAWS actually renders this as "unspoken".... - style:
.invisibleitem {color: thecolorname; background-color: thecolorname}, setting the foreground and background colors to be the same. The color "thecolorname" is either a hexadecimal number, RGB number, or a named color. Space will be allocated for the display of the element.
Code:
<span class="invisibleitem"><a href="#main">[Main Content]</a></span>
<a href="link1.htm">Link 1</a><br>
<a href="link2.htm">Link 2</a><br>
...<br>
<a href="linkn.htm">Link n</a><br>
...<br>
<a name="#main">Main Content Title</a>
4. Use a visible icon to indicate the skip link. Pros: developers can test it. Cons: visible.
Code:
<a href="#main"><img src="skipicon.gif" alt="Main Content"></a>
<a href="link1.htm">Link 1</a><br>
<a href="link2.htm">Link 2</a><br>
...<br>
<a href="linkn.htm">Link n</a><br>
...<br>
<a name="#main">Main Content Title</a>
5. Use layout to force navigation to the main content. This can be done with tables, and can be useful for sites with multi-column layout.
Code:
<table>
<tr>
<td></td>
<td rowspan="2"><h2>Main Content Title</h2></td>
<td></td>
</tr>
<tr>
<td><p><a href="link1.htm">Link 1>/a><br><a href="link2.htm">Link 2</a><br>...<br><a href="linkn.htm">Link n</a></p></td>
<td></td>
</tr>
</table>
The user tabbing through the table will "skip" over the links, because they are actually in the second row of the table, and go right to the main content.
6. Use style sheets for positioning elements. One must ensure that the order typed in the source file is the order to be displayed. By using positioning, the navigation links, typed after the main content, can be displayed.
Example: Using Styles to Position Navigation Links
Skip links to other Section 508 Rules and return to main content