Skip Links Not Working In Chrome

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 th

Solution 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.

Solution 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:

#skiptocontenta {
    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
}
#skiptocontenta: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.

Solution 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/

Solution 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();
});