Main Points
- Internet Explorer Tab Problem Continued An explanation of this page and a continuation of the IE problem we're addressing.
- Unanchored Keyboard Navigation Demos Demos of the inpage navigation techniques without anchors.
- Internet Explorer Tab Problem Conclusion A summary of the testing results.
- Skip to Main Points links return to the Main Points menu.
Internet Explorer Tab Problem Continued
When using a named anchor, IE has a serious problem for keyboard users including the blind, text browser users, etc. Visually, inpage links go to the target element. However, if you try to tab further down the page, IE begins tabbing from the top. In the first page we used variations of the standard named anchor technique.
In this page we take a look at a more sophisticated and efficient technique. It is possible in some instances to link directly to an element. We link directly to the name or more commonly the id of the target element without the typical expedient of an anchor.
You can see how much more efficient this way of coding is. This can cause some problems, which is exactly why we constructed this page for testing. Abandoning the anchors, eliminates a possibly superfluous piece of markup, not to mention that named anchors have fallen from favor in many web circles. However, as always, it is even more important to have a stable, working, accessible solution.
Skip to Main PointsUnanchored Keyboard Navigation Demos
As on the previous batch of tests, I'm targeting specific key elements. In the first place, I want to link to my contact form image, so I've included images in each of these demos. I also want the inpage links from the main points box to go to the headings of each section so headings are included too. Finally, div tags are a great universal tool for isolating any cluster of related content, so I'm also including them as well.
Using named elements <img name="myName">
The standard way to set up inpage navigation is with named anchors. So my first sample is to attempt to link to the name attribute of an element. A named anchor takes the form <a name="myName">, so the image for example now takes a name element like this <img name="myName">. Then we link to the image in the standard way to link to a named anchor, <a href="#myName">. Unless otherwise specified <a href="#myName"> is the syntax used to link in every example in this demonstration page.
This is my heading.
Mouse Results: FF just sits there. There is no effect when clicking the link. IE displays an even more bizarre behavior. When clicking the named image link, IE redirects beautifully, but the heading and div links don't work. This looks like it will be merely the first of the bumps with trying to link directly to an element.
Keyboard Results: Hitting enter in FF has no effect, just like when clicking the links. The link retains focus so you can tab forward and back from that point. Hitting enter in IE works for the image link, but not the others. Like FF, the links which don't work retain focus. When you link to the image, IE displays the familiar tab issue and returns to the top of the page instead of moving to the next tab point after the image.
Using elements with ids <img id="myId">
Next we alter the syntax. Names are deprecated for most elements, and ids are a standard attribute used in many important elements on the page. Therefore, in many if not most cases an element we want to link to will already have an id. Ideally we would simply like to use it, so here is our tests to link to an id.
This is my heading.
Mouse Results: IE and FF work perfectly when linking to element IDs.
Keyboard Results: Keyboard navigation in FF is flawless. IE links to the target element, but does not solve the tab problem. IE returns to the top of the page. It is interesting to note however, that linking to an element ID is more stable than named anchors which had unexpected issues in our testing with FF.
Using named elements with ids <img name="myName" id="myId">
- Link to the named image with an id
- Link to the named heading with an id
- Link to the named div with an id
This time, we combine the syntax. We try to use both the name and id attributes for the elements. The links are directed to the name, not the id.
This is my heading.
Mouse Results: FF has no effect, this technique does not work. IE links to the image, but not to the heading or div, like the named elements above.
Keyboard Results: Keyboard navigation in FF has no effect; the links do not work. In IE only the image link works, and it displays the tab problem; it returns to the top of the page if you tab after activating the image link.
Using elements with ids (and names) <img name="myName" id="myId">
This time, we reverse the link. We use both the name and id attributes for the elements, however the links are directed to the ids, even though they have name attributes.
This is my heading.
Mouse Results: IE and FF link beautifully.
Keyboard Results: IE links to the target elements, but displays the tab problem. FF works flawlessly by comparison.
Using named elements with a tab index <img name="myName" tabindex="0">
- Link to the tab indexed image by name
- Link to the tab indexed heading by name
- Link to the tab indexed div by name
This time, we try linking to a named element but add a tab index of zero. The tab index inserts the named anchor into the tab order explicitly, and was a key element to getting anchors to work properly in keyboard navigation. We'll see how it works this time.
This is my heading.
Mouse Results: IE links to the image, but the other two links fail. FF fails, as it did with named anchors.
Keyboard Results: IE links to the image successfully and can tab forward and backwards from that point; this appears to solve the tab problem for the image link. Unfortunately, like named anchors, neither of the other links work. And in FF none of the links work. The linking text retains focus instead of shifting to the target element.
Using elements with an id and tab index <img id="myId" tabindex="0">
- Link to the tab indexed image by id
- Link to the tab indexed heading by id
- Link to the tab indexed div by id
Last but not least we try linking to the id of an element that has a tab index of zero.
This is my heading.
Mouse Results: FF and IE link perfectly.
Keyboard Results: FF and IE link to the target elements and the elements work in the tab order. This syntax works and resolves the tab problem in IE. I'm not sure whether I'm more amazed that an anchorless syntax exists... or that it just happened to be the last testing scenario. Well, it makes a great ending either way.
Skip to Main PointsInternet Explorer Tab Problem Conclusion
Linking to elements names was an almost unqualified disaster. Surprisingly however, linking directly to element ids turned out to be more stable than linking to named anchors. I don't believe that FF fails with named anchors, but the problems it displayed do speak to some instability. That was not apparent on this page at all. Linking to element ids was not only more stable, it is also more efficient. It avoids the need to add an anchor tag to serve as a target. It also neatly avoids the validity problem because we're not using anchors which are not valid without either an href or name attribute. On the other hand, elements can take a lone id and nothing else, and frequently have one for other reasons. The inpage link can simply make use of id which is already there.
As in the previous testing page, tab index turned out to be a critical element for accessibility. Setting a tab index of zero was the technique that overcame the tab problem in IE. When linking to an element with an id and a tab index, keyboard and mouse navigation both worked beautifully. The downside, is that sometimes tabindex is not a valid attribute for the element you want to target. However, since this appears to be the only strike against the technique and because it follows standards functionally agreed to by Internet Explorer, Firefox, Opera, and Safari. While the W3C may hate me, that sounds like an agreed upon standard to me. Especially since the "approved" technique traditionally used required invalid anchor attributes to work accessibly anyway. When using inpage links, therefore, the most stable solution appears to be...
This solution is more stable in FF than the best results we achieved with variations on named anchors, and solves the tab problem that typically affects IE inpage navigation. It is the only solution that seems to work, but then we only need one way to do it. As always, the syntax to link to the element id is...