RE: A question on bypassing a group of links

There is a detailed discussion of skip navigation techniques that resulted
from an action item in the Techniques task group. See [1] with the supper
subject "Revised" - sorry about that. There is a test page with various
techniques at [2] and a table as to which techniques work with which
browsers and assistive technologies. If anybody has any alterations in that
table, I would love to know about it. The big issue for skip links is, in my
opinion, whether they work with the keyboard. That means that not only the
visual focus follows when you activate the skip link, but also input focus.
That means that the next tab takes the user to the first link after the
target of the skip link.

The most common skip link technique is providing a link to an empty named
anchor <a name="content"><a> or <a id="content"><a> or even <a id="content"
/>. That technique does NOT work in IE6 with the keyboard as one of the
first skip links at http://wwww.acb.org illustrates. (Remember to tab one
more time after executing the skip link.) However I have come up with a
counter example to that statement. http://westciv.com has a visible skip
link at the top of the page. The target is an empty anchor. It works from
the keyboard. To make matters worse, when I saved westciv.com locally
without their style sheet, the skip link did not work with the keyboard -
which I would predict. When I downloaded the style sheet and attached it -
the skip link did work - which baffles me. This is a mystery to me and if
anyone can figure it out - I would love to here. A asked the folks at
westciv.com if they had any idea and they suggested reading Joe Clark's Book
(the answer is not there).

I know about the recommendation for using a map element to group links in
the WCAG 1.0 techniques document and I probably should have mentioned it in
[1], but, though it does group links, there is no user agent that I know of
that provides navigation over the map - which is the whole point. You have
added a skip link to the navigation map - whether it will work with the
keyboard is the big question in [1]. Your second approach

<blockquote>
<body>     
     <div title="Navigation Bar">    
       <span class="skip">
       [<a href="#how">Bypass navigation bar</a>]
       </span>
       [<a href="home.html">Home</a>]
       [<a href="search.html">Search</a>]
       [<a href="new.html">New and highlighted</a>]
       [<a href="sitemap.html">Site map</a>]
     </div>     
     <h1><a id="how">How to use our site</a></h1>
   <!-- content of page -->     
   </body>
and the following CSS rule:
.skip {display:none} /* for not no be shown in graphical browsers */
</blockquote>

is doomed to failure because the property display:none hides the link from
exactly those users that you were trying to accommodate. 


[1] http://lists.w3.org/Archives/Public/w3c-wai-gl/2004AprJun/0769.html. 
[2] http://jimthatcher.com/test/skipnavtest.htm. 

Jim
Accessibility, What Not to do: http://jimthatcher.com/whatnot.htm.
Web Accessibility Tutorial: http://jimthatcher.com/webcourse1.htm.

Received on Monday, 5 July 2004 11:36:05 UTC