WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Intra-page links and tab order thru content (second pass thru)

for

From: Jared Smith
Date: Aug 21, 2012 11:50AM

On Tue, Aug 21, 2012 at 6:42 AM, Wolf, Jan - DWD wrote:
> What is everybody else doing to fix the intra-page link bug in IE still (thru 9) and Chrome? I would like to say up front that I prefer not to use a JavaScript solution if possible. In the past, there has been a CSS inline style solution used.

It's been a while since I tried to tackle this using only CSS and I'm
not sure how well these are supported in newer IE versions. You might
try zoom:1 styles on the link targets and see if that does the trick.
Or you can try a CSS expression to set the tabindex value...
behavior:expression((this.runtimeStyle.behavior="none")&&(this.tabIndex="-1"));

I'm not aware of a CSS-only solution to the Chrome in-page navigation
bugs. I think the likelihood of a keyboard-only user using Chrome is
slim to none due to it's significant keyboard accessibility issues.

JavaScript is really a very good way to address these issues and it's
what we currently do on the WebAIM site. You can see our jQuery
implementation at http://webaim.org/media/scripts/main.js You can see
this in use by activating the "skip" link or Article Contents links at
http://webaim.org/intro. This scripts does a few things:

- sets the tabindex attribute for in-page link targets (we use <div>s
with id or class values).
- uses focus() to set keyboard focus to in-page link targets.
- properly focuses when the user activates in-page links or if the
user comes to a URL that includes an anchor/hash.
- adds a 100ms delay to maintain focus and visual highlighting (which
is not necessary, but a nice accessibility and usability enhancement)
in some browsers.

Jared