- From: Jim Thatcher <jim@jimthatcher.com>
- Date: Tue, 22 Jun 2004 21:32:18 -0500
- To: "'WAI-GL'" <w3c-wai-gl@w3.org>
Here is a revised Skip links discussion base on several comments on the
list.
Changes:
(2) id attribute instead of name attribute in anchor element [2].
(3) table of contents idea [3].
(4) that headings navigation works in Opera [4].
(5) added some comments on when skip links should be used [5].
Action item to deal with Bugzilla bug #241 [1].
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.
When should skip links be used? If there are five or more navigation links
and/or other content that comes before the main content of the page then the
skip navigation technique should probably be used. If there are twenty links
and other elements before the main content, one of these techniques
definitely should be used.
What about skipping to different parts of the page say the local navigation
links, the search field, recent news, and main content, like a short table
of contents at the top of the page? Many sites do have short "jump tables"
at the top of the page and clearly this can be useful so long as the number
of links is kept very small - say four or less. Adding more than that is
defeating the purpose of the skip link. Better than such a "jump table"
would to be to markup the sections with headings markup - see technique 3.
below. Sometimes there seems to be no Main Content, maybe the page is all
links. If that is the case you probably should not have a skip link and
perhaps you will want to consider adding more structure to your page so
content can be grouped and labeled with headings markup.
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 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 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 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.
It is a fact that screen readers (and IBM Home Page Reader) depend on
Internet Explorer, but if a screen reader is not a requirement, headings
navigation is available in Opera (S for forward, W for backwards).
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.
[2] http://lists.w3.org/Archives/Public/w3c-wai-gl/2004AprJun/0673.html
[3] http://lists.w3.org/Archives/Public/w3c-wai-gl/2004AprJun/0678.html
[4] http://lists.w3.org/Archives/Public/w3c-wai-gl/2004AprJun/0679.html
[5] http://lists.w3.org/Archives/Public/w3c-wai-gl/2004AprJun/0683.html
Received on Tuesday, 22 June 2004 22:32:50 UTC