WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Chrome and Skip Links

for

From: Paul.Adam@dars.state.tx.us
Date: Apr 29, 2011 7:18AM


The example Jason gave works on Chrome for Windows. I recently competed in an accessible web design competition and did a lot of cross-browser, OS, and mobile device testing.

I found a skip link that works for Safari and Chrome on Mac. Requires JavaScript though. It will display on those browsers the visible text "Start of Content" so you may not like this but I think it could be placed off the page with CSS positioning. The live example is at http://pauljadam.com/bluemistband

<p><a href="#contentstart" id="skiplink">Skip to Content</a></p>


<p><a id="contentstart" tabindex="-1"></a></p>

<!-- This is the skiplink javascript. This makes the skip link work for WebKit browsers (e.g. Safari and Chrome. It must appear after both the skip link and skip target, so the bottom of the page is best -->
<script type="text/javascript">
//<![CDATA[
var is_webkit = navigator.userAgent.toLowerCase().indexOf('webkit') > -1;
var is_opera = navigator.userAgent.toLowerCase().indexOf('opera') > -1;
if(is_webkit || is_opera)
{
var target = document.getElementById('contentstart');
target.href="#contentstart";
target.innerText="Start of Content";
target.setAttribute("tabindex" , "0");
document.getElementById('skiplink').setAttribute("onclick" , "document.getElementById('contentstart').focus();");
}
//]]>
</script>
<!-- End of skiplink javascript -->

Paul Adam
Accessibility Specialist
Center for Policy and Innovation
<EMAIL REMOVED>

-----Original Message-----
From: Rick Hill [mailto: <EMAIL REMOVED> ]
Sent: Thursday, April 28, 2011 10:50 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Chrome and Skip Links

I don't find that this fixes the focus issue for Safari or Chrome on Mac
OS X.


Rick Hill, Web CMS Administrator
University Communications, UC Davis



-----Original Message-----
From: Jason Megginson < <EMAIL REMOVED> >
Reply-To: WebAIM Discussion List < <EMAIL REMOVED> >
Date: Thu, 28 Apr 2011 11:36:42 -0400
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Chrome and Skip Links

What is the syntax your developer is using?

I have found that the following syntax (with tabindex="-1") works the
best:

<a href="#main">Skip to main</a>
...
<a name="main" id="main" tabindex="-1">

Jason Megginson
SSB BART Group
(O):703-637-8964
(C):703-244-7755


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Tim Harshbarger
Sent: Thursday, April 28, 2011 11:30 AM
To: WebAIM Discussion List
Subject: [WebAIM] Chrome and Skip Links

Do skip links work in Chrome? I have one of our developers saying that he
can't get skip links to work correctly within Chrome. If you click the
skip link, it appears to move focus to the internal anchor on the page,
but if you tab then it acts as though the keyboard focus is still on the
skip link at the top of the page.

Thanks!
Tim
Tim Harshbarger
Accessibility Consultant
State Farm Insurance Companies