WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Chrome and Skip Links

for

From: Paul.Adam
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>