WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: skip nav ... best practices 2015

for

From: Patrick H. Lauke
Date: Jan 31, 2015 2:49AM

On 31/01/2015 09:41, Patrick H. Lauke wrote:
> On 30/01/2015 16:57, Nancy Johnson wrote:
>> I'm updating HTMLS and css in an existing theme...
>> Just wondering what are the best practices for skip nav on a
>> responsive site?
>
> Not saying it's the best approach, but what we do in Bootstrap
> http://getbootstrap.com/getting-started/#accessibility seems to work
> reasonably well on large and small screens (e.g. iPhone with VoiceOver)
> - see for instance http://www.paciellogroup.com

Worth adding, though, that on the Paciello Group site, I also included a
tiny JavaScript patch to make the skip link actually work correctly in
Chrome (desktop) and WebKit/Safari

/* skip link patch for chrome, mainly */
jQuery('#skippy').click(function() {
var selector=jQuery(this).attr('href');
if(selector) {
jQuery(selector).attr('tabindex','-1').focus();
}
});

Incidentally, it seems VO/iOS has developed some bug in the latest
version that, after following the skip link with the above patch,
freezes VO...will have to investigate this further...

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke