Re: [techs] Skip navigation techniques

Thanks for this very good description.

But when is a skip navigation link required? Here are some suggestions...

There must be at least 4 navigation links. If the page has 3 or less
navigation links is it still appropriate to jump over them?

There must be content after the navigation links. Some pages contain all
links so there's no point in jumping over them.

Do multiple banner ads at the beginning of a page require a skip link?
Advertisers may object.

Repetitive HTML code may require a skip link. For example, the CNN site [1]
contains a search function at the top of each page that could benefit from a
skip link.

If a site contains multiple segments that can be skipped (e.g. multiple sets
of navigation links like eBay[2]) should there be only one skip link?

What is the target content that you should skip to? For example on the
Amazon site [3] would you want to skip to the search function or skip to the
main text area?

Chris

[1] http://www.cnn.com
[2] http://www.ebay.com
[3] http://www.amazon.com


----- Original Message ----- 
From: "Jim Thatcher" <jim@jimthatcher.com>
To: "'WAI GL (E-mail)'" <w3c-wai-gl@w3.org>
Sent: Wednesday, June 16, 2004 5:13 PM
Subject: [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 Thursday, 17 June 2004 10:10:50 UTC