Skip navigation link doesn’t work in Google Chrome

Question

I follow this page to make the "Skip navigation" link, however it does not work in Chrome (5.0.375.127).

When I insert and enter a link, it browses the content, but when I continue the tab, it starts from the top, but does not start from the content.

This page skips the Skip Navigation link, also does not work in Chrome.

Is this a Chrome bug? Any workaround?

Answer 1

I understand. The target should be a tag that can be focused like a link, if not, that is, my case div, should set the target's tabindex to -1.

My jQuery solution with ScrollTo plug-in :

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

Answer 2

A known bug in Chrome (Webkit) that does not allow you to scroll the anchor twice. Therefore, if you previously opened #anchor, scrolled up and clicked on the #anchor link again, this would not 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> 

Chrome tested the following:

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

Answer 3

I can confirm that Andy Lee's answer is responding, but I don't need scrollTo stuff. I also added a hook so that if you load a page with an anchor already attached, the corresponding focus will be provided.

My version:

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

Answer 4

I believe that it is more appropriate to attribute this chrome bug # 37221 according to Knu in response to Skip links not working in Chrome .

I disagree that Javascript workarounds are suitable for long term use.

Answer 5

I know this is an old question, but I finally stumbled upon it today after searching for a watch. I still have not found a non-js solution for this, and although the problem is marked as fixed in Chrome, it still exhibits the same behavior. Due to the lack of anything else, I used jQuery. Instead of an inline script, I used an unobtrusive event listener.

HTML:

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

jQuery:

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

I also hide the link if it does not receive focus from the keyboard. Thus, only users of the keyboard and screen readers will know that there is a connection. Using CSS3, you can make sure that it becomes short-lived if the user quickly closes it.

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 to use javascript, I'd love to hear it. I don't think the solution is really affordable if it requires js.

Answer 6

Here is my workaround. It allows you to follow the link to any element on your page.

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

Here is the onclick event handler.

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

• A reference with the href attribute may be a suitable binding destination for keyboard navigation.
• Even if I remove the href attribute from the a link with focus, browsers will still remember the focus position for navigating the keyboard, while it will no longer show you the focus mark on the screen.

I wrote it to navigate a pop-up page that is unlikely to scroll. I hope it will work even for screen reading.

Answer 7

Here's a solution without jQuery.

Add Page Link:

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

Content Link:

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

My jsfiddle