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