Q&A: Internet Explorer keyboard navigation doesn\’t workMonday, April 2nd, 2007 at 5:06 pm
Q: I have a Table of Contents at the beginning of a page that is linked to anchors around the headlines of all the content sections. When I click them with a mouse there is no problem â€“ I get sent to the heading, read the paragraph and click the â€œback to topâ€? link to go to the TOC. However, as I need to be accessible with this project I realised that when I use the keyboard and tab from link to link and hit enter I get sent to the section, but hitting tab doesnâ€™t get me to the first link in this section but to the next item in the TOC! What am I doing wrong?
A: You are not doing anything wrong â€“ Internet Explorer is (I assume this is what you are using). Internet Explorer has a really bizarre bug – it scrolls the page to a named anchor but fails to move the keyboard focus.
The fix for the problem has to do with IEâ€™s hasLayout property. This property is set to true whenever an element has a defined height or width, is floated or has some other IE-only properties like zoom set. One solution to make IE move the keyboard focus is to contain the link in an element that has a hasLayout property of true, like a DIV with defined measurements.
This bug has been undiscovered for a long time as table cells by default have a hasLayout of true in IE and therefore the problem never occurred in table based layouts.
Another solution to the problem is to give the link a predefined tabindex property. If you donâ€™t know how many links there are or you need tabindex for other reasons, you can use a tabindex of -1, which is not valid in HTML, but does the trick.
You can read more about this problem and the solutions in more detail over at Gez Lemonâ€™s Juicy Studio :