E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 8 (In chronological order)

From: Nancy Johnson
Date: Fri, Jan 30 2015 9:57AM
Subject: skip nav ... best practices 2015
No previous message | Next message →

I'm updating HTMLS and css in an existing theme...
Just wondering what are the best practices for skip nav on a responsive site?

Nancy Johnson

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Fri, Jan 30 2015 12:44PM
Subject: Re: skip nav ... best practices 2015
← Previous message | Next message →

Nancy,

I have not seen a reply for this question.

This is just my two cents worth. I still find the skip nav useful because of the number of people who don't mark up their sites very well. There are also blind people who don't know how to use regions, as well as screen readers which don't fully implement them correctly.

Susie Stanzel

From: Wloch, Rob
Date: Fri, Jan 30 2015 2:13PM
Subject: Re: skip nav ... best practices 2015
← Previous message | Next message →

Not sure if you've heard of the WET framework but I believe that their skip nav was designed with WCAG 2.0 and responsive design in mind. If you go to the following link you can tab a few times to see the skip nav appear and if using Firefox in responsive design view then you can see how it looks on mobile but since there is no tabbing on touchscreens I wonder how it would show up on an actual device...

http://wet-boew.github.io/v4.0-ci/theme/content-en.html

I hope this helps a bit.

-Rob.

From: Lynn Holdsworth
Date: Fri, Jan 30 2015 11:37PM
Subject: Re: skip nav ... best practices 2015
← Previous message | Next message →

Rob, the way that link works is counter-productive on an iPhone using iOS 8.1.3. When VO says "Skip to main content", the focus is actually on the Reload button.

Cheers, Lynn



> On 30 Jan 2015, at 21:13, Wloch, Rob < = EMAIL ADDRESS REMOVED = > wrote:
>
> Not sure if you've heard of the WET framework but I believe that their skip nav was designed with WCAG 2.0 and responsive design in mind. If you go to the following link you can tab a few times to see the skip nav appear and if using Firefox in responsive design view then you can see how it looks on mobile but since there is no tabbing on touchscreens I wonder how it would show up on an actual device...
>
> http://wet-boew.github.io/v4.0-ci/theme/content-en.html
>
> I hope this helps a bit.
>
> -Rob.
>
>

From: Patrick H. Lauke
Date: Sat, Jan 31 2015 2:41AM
Subject: Re: skip nav ... best practices 2015
← Previous message | Next message →

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

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

From: Patrick H. Lauke
Date: Sat, Jan 31 2015 2:44AM
Subject: Re: skip nav ... best practices 2015
← Previous message | Next message →

On 31/01/2015 06:37, Lynn Holdsworth wrote:
> Rob, the way that link works is counter-productive on an iPhone using iOS 8.1.3. When VO says "Skip to main content", the focus is actually on the Reload button.

Indeed, the WET approach seems to do something funky with
JavaScript...as soon as VoiceOver's focus gets on the skip link, it
seems to be bounced back out of the page, making it unusable...

P

> Cheers, Lynn
>
>
>
>> On 30 Jan 2015, at 21:13, Wloch, Rob < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Not sure if you've heard of the WET framework but I believe that their skip nav was designed with WCAG 2.0 and responsive design in mind. If you go to the following link you can tab a few times to see the skip nav appear and if using Firefox in responsive design view then you can see how it looks on mobile but since there is no tabbing on touchscreens I wonder how it would show up on an actual device...
>>
>> http://wet-boew.github.io/v4.0-ci/theme/content-en.html
>>
>> I hope this helps a bit.
>>
>> -Rob.
>>
>>

From: Patrick H. Lauke
Date: Sat, Jan 31 2015 2:49AM
Subject: Re: skip nav ... best practices 2015
← Previous message | Next message →

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

From: Cliff Tyllick
Date: Sat, Jan 31 2015 10:31AM
Subject: Re: skip nav ... best practices 2015
← Previous message | No next message

I'm too lazy to check it out on a Saturday morning, but I'll bet the problem is that the skip to main content link is hidden off screen in WET. The behavior you're describing is exactly what happens when the focus moves off screen—the browser loses track of the current location, and focus skips back to the top of the page.

Cliff Tyllick
Texas Department of Assistive and Rehabilitative Services

Sent from my iPad

>> On Jan 31, 2015, at 3:44 AM, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> On 31/01/2015 06:37, Lynn Holdsworth wrote:
>> Rob, the way that link works is counter-productive on an iPhone using iOS 8.1.3. When VO says "Skip to main content", the focus is actually on the Reload button.
>
> Indeed, the WET approach seems to do something funky with JavaScript...as soon as VoiceOver's focus gets on the skip link, it seems to be bounced back out of the page, making it unusable...
>
> P
>
>> Cheers, Lynn
>>
>>
>>
>>> On 30 Jan 2015, at 21:13, Wloch, Rob < = EMAIL ADDRESS REMOVED = > wrote:
>>>
>>> Not sure if you've heard of the WET framework but I believe that their skip nav was designed with WCAG 2.0 and responsive design in mind. If you go to the following link you can tab a few times to see the skip nav appear and if using Firefox in responsive design view then you can see how it looks on mobile but since there is no tabbing on touchscreens I wonder how it would show up on an actual device...
>>>
>>> http://wet-boew.github.io/v4.0-ci/theme/content-en.html
>>>
>>> I hope this helps a bit.
>>>
>>> -Rob.
>>>
>>>