Named Anchors and Skip Navigation
This afternoon I started wondering whether it might be time to change my approach to named anchors and skip navigation links. The very old school way of creating these was to use the name attribute.
<a href="#destination">jump to destination</a>
<a name="destination"></a>
Using XHTML, and being aware that name is a deprecated way of achieving this kind of link to a specified destination within a web page, I moved several years ago to using both name and id in the destination link. This method offers backwards compatability with version 4 browsers at the cost of redundancy.
<a href="#destination">jump to destination</a>
<a name="destination" id="destination"></a>
If possible, I’ve always thought it was a good idea to place the destination within an existing element, perhaps a h2 or h3 in your existing markup, or incorporate the destination into an existing link. And, if you’re not out to support browsers like Netscape Navigator 4 you can probably just stick with the id in the destination. However, if backwards compatability is critical – by all means follow the example of redundancy.
Here’s where it becomes interesting. The ideal way would be to link to a destination that’s already an existing id in our markup.
<a href="#destination">jump to destination</a>
<h3 id="destination">Existing Heading</h3>
This works fine in modern browsers (but not for keyboard users in IE6), and it would at a glance appear to be the contemporary best way of achieving something like a skip link or a link which jumps to a specified section of a page. It just wouldn’t work in really old browsers that expected the deprecated name, although id is the required attribute if you’re using XHTML. Jim Thatcher’s resource page on Skip Navigation Links has a chart partway down the page which outlines test results for skip link techniques – there’s no foolproof way of providing keyboard access across platforms at this time.
Looking at Jim’s test results, IE6 keyboard users can’t access the link unless its a named anchor in a table cell, a named anchor in an empty link or wrapped in a span given the width of 100%. Which doesn’t work in Window Eyes 4.50, Opera and Window Eyes 4.50 respectively. If you’re interested read you might read Jim’s simple work-around for the IE focus bug affecting this situation.
WebAIM’s resource on Skip Navigation Links outlines the effective use of skip navigation links and has some more to say about the IE focus bug, too. Also, Gez Lemon’s page on Skip Links provides more information and there’s a solid rounding off at Motive.co.nz.
At this time my inclination is to stick with the redundant name and id, which the validator passes with green for go on XHTML 1.0 Strict.
<a href="#destination">jump to destination</a>
<a name="destination" id="destination"></a>
I like Jim’s example of how Westciv deals with this, but I don’t feel warm and cosy about creating extra divs to achieve results just for keyboard users not using assistive technology on Windows. It feels a bit edge case at this point. I also don’t feel comfortable that I know enough about the treatment of name versus id attributes on various mobile browsers, so redundancy seems the best way to go for backwards compatability.
What I’m strongly against are irresponsible uses of this type of linking, where an attempt is made to either simulate a shallow linked index which links to a set of lower sections, or the spiderweb intermeshing of links throughout large sites which might confuse users as to whether they have left given pages and areas, or not. But that’s for another day, I guess. Skip links are a great application (albeit a bit of a necessary hack) but remember that all things can be over-used for not so good results. You just have to weigh up the situation and go with what’s best for your project.
