E-mail List Archives
Re: Chrome and Skip Links
From: Paul.Adam
Date: Apr 29, 2011 7:18AM
- Next message: Juliana Perry: "Responsive data tables-- accessibility implications?"
- Previous message: Jadhav, Ashitosh: "Re: Chrome and Skip Links"
- Next message in Thread: Rick Hill: "Re: Chrome and Skip Links"
- Previous message in Thread: Jadhav, Ashitosh: "Re: Chrome and Skip Links"
- View all messages in this Thread
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>
- Next message: Juliana Perry: "Responsive data tables-- accessibility implications?"
- Previous message: Jadhav, Ashitosh: "Re: Chrome and Skip Links"
- Next message in Thread: Rick Hill: "Re: Chrome and Skip Links"
- Previous message in Thread: Jadhav, Ashitosh: "Re: Chrome and Skip Links"
- View all messages in this Thread