Skip links and other in page links in WebKit browsers
Recently a coworker pointed me to an article explaining Why your ‘Skip to Content’ link might not work in WebKit-based browsers like Safari and Chrome. Read the article for details or read my post from September 2005 about Keyboard navigation problems in IE and Safari for a briefer explanation.
In summary: following an in page link (a link that targets an element on the same page, like <a href="#main">Skip to main content</a>) does not properly move keyboard focus in WebKit browsers. This means that when you press tab after activating an in page link, focus is moved to the first focusable element after the link rather than the first focusable element after the target.
This can be both confusing and frustrating for people who use the keyboard to navigate. You can use various JavaScript trickery as a workaround, but in my opinion this is something that should be fixed in the browsers, not by developers. Especially as only WebKit browsers have the bug—every other browser gets it right.
There is a bug report for this issue in the WebKit Bugzilla—Bug 17450 - in page anchor and keyboard navigation. There has been some activity on the bug lately, so it looks like a fix may appear eventually.
I’m hoping for sooner rather than later.
- Previous post: Using max-width on images can make them disappear in IE8
- Next post: Use only what you need