WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Chrome and Skip Links

for

From: Sailesh Panchang
Date: Apr 29, 2011 12:57PM

This is puzzling and raises a fundamental question: Do links that
point to content within the same Web page not work on these browsers?
What's so special about a skip nav link... apart from the fact that it
aids keyboard navigation and may or may not be visible? It is a link
with its target set to some other part of the page and should work
without a hitch without any extra JS code.
So do all same-page links fail on these browsers?
Sailesh

On 4/29/11, <EMAIL REMOVED> < <EMAIL REMOVED> > wrote:
> 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>
>
>