WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Chrome and Skip Links

for

From: Rick Hill
Date: Apr 29, 2011 11:42AM


More: tabindex isn't an attribute that can be applied to a div, so if a
skip nav is anchored to a div id, the tabindexs="-1" solution isn't
available.

W3C specs:

Elements that may receive focus should be navigated by user agents
according to the following rules:

Those elements that support the tabindex attribute and assign a positive
value to it are navigated first. Navigation proceeds from the element with
the lowest tabindex value to the element with the highest value. Values
need not be sequential nor must they begin with any particular value.
Elements that have identical tabindex values should be navigated in the
order they appear in the character stream.
Those elements that do not support the tabindex attribute or support it
and assign it a value of "0" are navigated next. These elements are
navigated in the order they appear in the character stream.
Elements that are disabled do not participate in the tabbing order.
The following elements support the tabindex attribute: A, AREA, BUTTON,
INPUT, OBJECT, SELECT, and TEXTAREA.


So, actually, the -1 is out of spec. And it would seem that tabindex=0
would do the trick. However, in Safari 5 under OSX 10.6 , neither
tabindex="-1 or tabindex="0" applied to a named anchor moves the keyboard
focus for me when I test it Š wish it would!
­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­
Rick Hill


-----Original Message-----
From: < <EMAIL REMOVED> >
Reply-To: WebAIM Discussion List < <EMAIL REMOVED> >
Date: Fri, 29 Apr 2011 08:19:24 -0500
To: < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Chrome and Skip Links

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