“Skip Navigation” link not working in Google Chrom

问题:

I follow this page to make a "Skip Navigation" link, however it is not working in Chrome (5.0.375.127).

When I tab and enter the link, it scroll to the content, but when I continue to tab, it starts from the top but not start from the content.

That page's skip "Skip Navigation" link is not working in Chrome either.

Is it a bug of Chrome? Any workaround?

回答1:

There is a known bug in Chrome (Webkit) that prevents you from scrolling twice to an anchor. So if you openen #anchor previously, scrolled up, and clicked again on a link reffering to #anchor, it won't work.

See: http://code.google.com/p/chromium/issues/detail?id=42511

I haven't tried it yet, but what about using javascript to clear the hash first? Like this:

<a href="#content" onclick="location.hash='';">Scroll to content</a>

Tested the following in Chrome, it works:

<a href="#content" onclick="this.focus();">Scroll and tab</a>

回答2:

I get it. The target should be a tag that can be focused, like a link, if not, which is my case a div, should set tabindex of the target as -1.

My jQuery solution, with ScrollTo plug-in, is:

$("a[href^='#']")
    .click(function(evt){
        var j = $(evt.currentTarget);
        var anchorTarget = j.attr("href");
        $("body")
            .scrollTo(anchorTarget, 500, {
                onAfter:function() {
                    window.location.hash = anchorTarget.substr(1);
                    $(anchorTarget).attr("tabindex",-1).focus();
                }
            });

        evt.preventDefault();
    });

回答3:

I can confirm that Andy Li's answer works, but I didn't need the scrollTo stuff. I also added in a hook so that if you are loading a page with an anchor link already applied, the appropriate focus would be given.

My version was:

// Fixes anchor focus in Chrome/Safari/IE by setting the tabindex of the 
// target container to -1 on click/enter
// see -> http://stackoverflow.com/questions/3572843/skip-navigation-link-not-working-in-google-chrome/6188217#6188217

$("a[href^='#']").click(function(evt){
    var anchortarget = $(this).attr("href");
    $(anchortarget).attr("tabindex", -1).focus();
});

// Fixes anchor focus in Chrome/Safari/IE by setting the tabindex of the 
// target container to -1 on page load
if (window.location.hash) {
    $(window.location.hash).attr("tabindex", -1).focus();
}

回答4:

I believe it is most correct to attribute this to chrome bug #37221 as per Knu in the answer to Skip links not working in Chrome.

I don't agree that Javascript workarounds are appropriate for the long term.

回答5:

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.

回答6:

Here is my workaround. It enables keyboard skip navigation link to any element id on its page.

<a href="#" onclick="goToId('target_anchor_id'); return false;">click to skip</a>
....
<h3 id="target_anchor_id">

The link's onclick event handler is here.

function goToId(id) {
    if (id) {
        //make temporary 'a' element just before the anchor destination
        var id_tmp = "___" + id;
        var e = $("#" + id);
        var e_tmp = $("#" + id_tmp);

        if (e_tmp.length == 0) {
            e.prepend("<a href='#' onclick='return false;' id='"+id_tmp+"'></a>");
            e_tmp = $("#" + id_tmp);
        } else {
            e_tmp.attr("href","#");
        }

        // go give the focus to my temporary 'a' element
        window.location.href = '#' + id_tmp;

        // make the temporary focus invisible by removing 'href' attribute.
        e_tmp.removeAttr("href");
    }
}

The following is my assumption.

1. Only a link with href attribute could be the proper destination of anchor link for keyboard navigation.
2. Even if I remove the href attribute from a link with focus, browsers will still remember the focus position for keyboard navigation while it will not show you the focus mark on the screen any more.

I wrote it for popup page skip navigation which isn't likely to be scrolled. I hope it will works even for screen readers.

回答7:

Here's the same solution without jQuery.

Add page anchor:

<div class="skip-nav">
  <a href="#content">Skip to content</a>
</div>

Link to the content:

<section id="content" tabindex="-1">
  Lorem ipsum...
</section>

My jsfiddle