How to make in-page links work.

I have been harping on this for months and have written about it at
http://jimthatcher.com/skipnav.htm. It is the fact that in-page links often
don't work when using the keyboard. And it is absolutely crucial for
keyboard navigation that in-page links work. After something like 6 months I
think there is answer to the question: "how can you get in-page links to
consistently work with the keyboard without resorting to either table cells
(when the target is in a table cell the link usually works) or making the
target a link (always works)?  Remember this is all IE - the other browsers
do not have a problem.

This concept of an in-page link working or not seems to be a little hard to
get across. Here it is. First of all, do not use the mouse. Now tab to the
in-page link; press enter. The visual focus will change if it should. Now,
and this is the key. Tab again. The link "works" if that tab took you to the
first link after the target.

Example 1: Put your mouse out of reach. Open http://webaim.org. Tab to the
skip Navigation link, the first link on the page. Press enter. There
probably was no change in the visual point of regard. Now tab again. The
first link in the "main content" is "Notice of proposed Rulemaking". That
link got focus. This in-page link works.
The target of this link is coded:  
<div style="width:0%;height:0px;">
<a name="maincontentlink" id="maincontentlink"></a></div>

Example 2: Open http://webaim.org/techniques/forms/. Tab all the way down to
"Introduction", the 16th link. Press enter. Note the visual focus shifts
this time. The first link after the target of the "Introduction" link is
http://sports.espn.go.com/ncb/index. Now Tab. Input focus moved to the top.
This link does not work. Input focus moved back to the top.
The target of this link is coded like this: <a name="Intro" id="Intro"></a>
with no special div around it.

Example 3: Open http://gawds.org. Tab to "Jump to Diary Archive" (the second
link). Press enter. The visual looks good. The next link is "Automated
Testing how Useful is IT?" (hmmm). Go ahead and Tab. Focus lands back up on
the search field. The link fails to "work" in that it doesn't bring input
focus with it.
This target that doesn't work is coded like this:
<h2 id="diaryarchive"><a name="diaryarchive">Diary archive</a></h2>.

Example 4: Open http://www.w3.org/WAI/. Tab to "Skip to Content." Press
enter. Visual focus moves as expected. Next link is "WCAG 2.0 Call for
Review". Tab. Ooops! Back to the top "Skip to content".  This link (and
every in-page link on the WAI site that I have tried) does not work from the
keyboard.
The target of this link is not an anchor, just a div with ID: <div
id="main">.

It probably is the case that <div id="main"> is supposed to work but it
doesn't if you are using IE only with the keyboard. So here's a workaround
that seems to work with the keyboard and with JAWS and Window-eyes.

Example 5: Open http://jimthatcher.com/sidebyside4.htm (this is a test page.
Tab to the in-page link, "Overview". Press enter. Tab again and you are on
"The WCAG View." This is the first link after the target. The link works
from the keyboard. It is also an in-page link. Hit enter again and you can
check that that one works too.
These targets are coded like this: 

<div style="width:0%;height:0px;">
<a name="Overview" id="Overview">
<img "src=\images\1-pix.gif" width="0" height="0" alt="" />
</a></div>

This combines the WebAIM technique (Example 1) with one Liam McGee has been
suggesting to me. I have just added an invisible gif as contents of the
named anchor. Without putting something as the contents of the anchor, the
WebAIM technique doesn't work for visual focus. It seems to work in Example
1 only because no visual focus shift was needed. Becky Gibson and Mike Scott
were the first to notice that when targets of in-page links were contained
in elements "with width defined" (whatever that means) - they generally
worked from the keyboard.  

Jim
 
Accessibility Consulting: http://jimthatcher.com/
512-306-0931

Received on Monday, 8 August 2005 02:32:12 UTC