[techs] Skip navigation techniques

Action item to deal with Bugzilla bug #241 [1]. Sorry this is so very long!

Skip Navigation Techniques

The idea is to provide a method for skipping over groups of mostly
repetitive navigation links to get to the main content of the page. The
problem is typified by http://www.cnn.com where there is a lead story in the
center middle of the page. But there is a tremendous amount of information
(links) that precedes that main story when listening to the page or when
tabbing through the links. Visually the main story, always with a lead
picture, is immediately obvious. CNN does have a skip navigation link.

1. Skip Navigation Link 

The link should be at or very near the top of the page; it is a link with a
local target just before the beginning of the main content.

<!-- at or very near the top of the page -->
<a href="#main">Skip Navigation</a>
<!-- many navigation links -->
<a name="main" id="main"></a>
<!-- beginning of main content -->

User agent issue: IE5 and 6 have a serious bug for all in-page links when
those links are activated from the keyboard. Although visual focus (point of
regard) correctly changes, input focus may not; instead it may revert to the
top of the page. There are two workarounds for this problem. 

(a) Make sure the target (the named anchor) is in a table cell! This
work-around explains why this problem has gone without notice for so long.
When tables are not used for layout, a table just for the target of the skip
link will work: 

<table summary="Begin main content"><tbody><tr><td>
   <a name="main" id="main"></a></td></tr></tbody></table>

The disadvantage of this work-around is that this is not using the table
markup for its intended purpose.

(b) When the target named anchor is a link, the input focus will work
properly. You can make the empty target a link like this:

<a name="main" id="main" href="#main" title="main content"></a>

The disadvantage of this work-around is that, depending on the screen reader
settings, it may result in an empty link in the tab-order and in a links
list. 

2. Hiding the skip link. 

Some designers would prefer not to have the skip link visible to all users.
There are several techniques used to hide the skip link.

(a) Unimportant image: Use an image that otherwise needs no text equivalent
and place the link text as alt text on that image.

<a href="#main">
   <img src="spacer.gif" width="1" height="1" alt="Skip Navigation"></a>

When using the tab key the link text will be heard by a screen reader and
without a screen reader the href can be observed in the status bar of IE.

(b) Color styling: Use the same foreground and background colors on the link
text (assume back text on white background in code example) 

<a href="#main" class="skip">Skip Navigation</a> 

CSS: a.skip {color: #FFFFFF; background-color: #FFFFFF;}

When using the tab key the link text will be heard by a screen reader and
without a screen reader the href can be observed in the status bar of IE.


(c) Color styling so visible when active: The same technique as (b) except
in addition make the link visible when the mouse is moved over the link or
the link receives focus with the tab key.

<a href="#main" class="skip">Skip Navigation</a> 

CSS: a.skip        {color: #FFFFFF; background-color: #FFFFFF;}
     a.skip:active {color: #000000; background-color: #FFFFFF;}
     a.skip:hover  {color: #000000; background-color: #FFFFFF;}

When using the tab key the link text will be heard by a screen reader and
seen in the graphical view when focused.     

(d) Hide the skip link by positioning it off screen.

<a href="#main" id="main" class="skip">Skip Navigation</a>

CSS: a.skip {position: absolute; left: -1000em; width: 20em;}

When using the tab key the link text will be heard by a screen reader and
without a screen reader the href can be observed in the status bar of IE.


(e) Hide the skip link using the display property; either display:none or
display:hidden. Screen readers will not speak text with display:none and
sometimes will not speak text with display:hidden. Therefore this technique
does not work since the main intended beneficiaries of the skip link idea
are screen reader users.

(3)Using headings instead of skip links

If the first heading in the natural reading order of the page is at the top
of the main content, then the heading provides an excellent method for
screen reader users to skip the navigation links because headings navigation
is so simple (the H key). However this technique is of no use for people
using IE and not using screen readers because IE lacks keyboard navigation
of headings.

(4) Layout so that skip navigation unnecessary. 

If with CSS the main content is at or near the top of the document or for a
page with table layout the navigation links all follow the main content then
a skip navigation link may be unnecessary. Example structure:

<!-- navigation on the right -->
<table><tbody><tr>
  <td>Main Content</td>
  <td>Navigation</td>
</tr></tbody></table>

<!-- With CSS -->
<div id="content">Main Content</div>
<div id="navigation">Navigation</div>

One can reasonably argue in both these cases it would be very helpful for
screen reader users to have a "skip to navigation" link implemented by one
of the techniques above.


Some Examples
1. Visible and inoperable http://www.acb.org. 
2. Invisible (on image) and inoperable http://www.w3,org/wai. 
3. Invisible (on image) and operable http://www.ibm.com. 
4. Invisible by color and visible when active (2c) and operable by its own
table (1a) http://webaim.org. 
5. Invisible by color and visible when active (2c) and operable because of
layout tables http://ittatc.org. 
6. Invisible by color and size (not mentioned above)
http://www.firstgov.com. 

[1] http://trace.wisc.edu/bugzilla_wcag/show_bug.cgi?id=241.

Received on Wednesday, 16 June 2004 17:13:40 UTC