Skip links not working in Chrome

Question

First of all, I've looked at this previous question but sadly it didn't seem to offer any solutions (other than JS which is a non-starter I'm afraid)

I've got some skip links at the top of my page...

<ul>
<li class="skip-link"><a href="#mainContent" accesskey="S"><span>Skip to main content</span></a></li>
<li class="skip-link"><a href="#main-navigation" accesskey="N"><span>Skip to main navigation</span></a></li>
</ul>

and further down there is...

<div id="mainContent"></div>

which is an empty div purely there to act as an anchor point.

Everything seems to work fine when the link is activated; visually the page jumps down, and focus shifts to the first link after #mainContent.

However in Chrome (v 12.0.742.91), whilst the page visually shifts down, the focus does not, meaning that after activating the accesskey, tabbing again merely jumps you back up to the top of the page and back into the access links.

I had an identical issue with IE which was put down to a known quirk and was fixed by setting a specific width to the target element. However, that doesn't seem to work for Chrome. I have also tried adding a tab-able element into #mainContent div, putting any sort of content in the #mainContent div, as well as all sorts of float/width/height variations and nothing seems to fix it.

Has anyone had any similar issues with Chrome or knows a fix?

Thanks in advance folks

Simon

Answer 1

The best you can do until someone find a trick/hack is starring this issue which succeeded this one. Your SO fellows will probably do the same because they care.

Apparently, it has finally been fixed.

Answer 2

I know this is an old question, but I finally stumbled across it today after searching for hours. I still haven't found a non-js solution to this, and though the issue is marked as fixed in Chrome, it still exhibits the same behavior. For a lack of anything else, I used jQuery. Rather than an inline script, I used an unobtrusive event listener.

The HTML:

<div id="skiptocontent"> 
    <a href="#mainContent" id="skipper">Skip to Main Content</a>
</div>

<div id="mainContent"></div>

The jQuery:

$(document).ready(function () {
    $("#skipper").click(function () {
        $('#mainContent').attr('tabIndex', -1).focus();
    });
});

I also hide the link unless it receives focus from the keyboard. That way only keyboard users and screen readers will ever know the link is there. Using CSS3, you can ensure that it becomes briefly visible if a user tabs rapidly past it.

The CSS:

#skiptocontent a {
    position: absolute;
    top:-40px;
    left:0px;
    background:transparent;
    -webkit-transition: top 1s ease-out, background 1s linear;
    transition: top 1s ease-out, background 1s linear;
    z-index: 100
}
#skiptocontent a:focus {
    position:absolute;
    left:0px;
    top:0px;
    background:#F1B82D;
    -webkit-transition: top .1s ease-in, background .5s linear;
    transition: top .1s ease-in, background .5s linear
}

For a demonstration, you can view the fiddle. If anyone has a way around the use of javascript, I would love to hear it. I don't think a solution is truly accessible if it requires js.

Answer 3

I came across this issue too and the only way I could find to fix it was with JavaScript (and jQuery).

So on the link I used an onClick $('#mainContent').attr('tabIndex',-1).focus();

"Adding the tabindex value of -1 to the div makes that div programmatically focusable, allowing it to take the focus when the .focus() method is used." -- Via: http://webstandardssherpa.com/reviews/overlays-and-lightboxes-keys-to-success/

See the fiddle: http://jsfiddle.net/PEDaS/1/

Answer 4

Took the snippets above and tried generalizing them to target any potential skip link.

jQuery('[href^="#"][href!="#"]').click(function() {
  jQuery(jQuery(this).attr('href')).attr('tabIndex', -1).focus();
});