E-mail List Archives
Thread: Skip nav links on mobile
Number of posts in this thread: 17 (In chronological order)
From: Greg Jellin
Date: Wed, Oct 30 2019 11:40AM
Subject: Skip nav links on mobile
No previous message | Next message →
Something that has recently occurred to me and I'm interested in hearing
opinions;
Situation: The desktop version of a site has top navigation, but the
mobile version of the site collapses the top nav into a hamburger menu.
Question: The desktop version should have a skip nav, but should the
skip nav be removed (hidden) from mobile versions of the site since the
top nav of the mobile version is collapsed and thus requires only one
swipe to bypass? Furthermore I find skip links problematic on mobile,
particularly iOS/VO.
Greg
From: Swift, Daniel P.
Date: Wed, Oct 30 2019 11:45AM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
I think you are referring to a 'skip to content' link ... ? I think it might be advantageous to keep the link assuming that there is a fair amount of fluff at the top of the page.
Dan Swift
Senior Web Specialist
University Communications and Marketing
West Chester University
610.738.0589
From: Carly Gerard
Date: Wed, Oct 30 2019 11:48AM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
There are also use cases of keyboards being used with mobile devices, so removing the skip to main content link could block those users from bypassing the navigation and other fluff before the main content.
Carly
[Western logo]
Carly Gerard | She/Her/Hers
Web Accessibility Engineer | Web Communication Technologies
Western Washington University
516 High Street, Bellingham WA 98225
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > | = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > | (360) 650-3944<tel:(360)%20650-3944>
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Swift, Daniel P. < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, October 30, 2019 10:45 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Skip nav links on mobile
I think you are referring to a 'skip to content' link ... ? I think it might be advantageous to keep the link assuming that there is a fair amount of fluff at the top of the page.
Dan Swift
Senior Web Specialist
University Communications and Marketing
West Chester University
610.738.0589
From: Lucy GRECO
Date: Wed, Oct 30 2019 12:29PM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
hello:
actually what is beeing asked here is if the fluf is all in one place i.e.
the hamburger menu can you omit the skip to. and i say yes if i have to
swipe one to a skip and then to a hamburger and then i am in the content
on the next swipe then why have that tab stop for the skip i say yes remove
the skip if its only skipping one thing. just my thought
Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces
On Wed, Oct 30, 2019 at 10:48 AM Carly Gerard < = EMAIL ADDRESS REMOVED = > wrote:
> There are also use cases of keyboards being used with mobile devices, so
> removing the skip to main content link could block those users from
> bypassing the navigation and other fluff before the main content.
>
> Carly
>
> [Western logo]
>
> Carly Gerard | She/Her/Hers
> Web Accessibility Engineer | Web Communication Technologies
> Western Washington University
> 516 High Street, Bellingham WA 98225
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > | = EMAIL ADDRESS REMOVED = <mailto:
> = EMAIL ADDRESS REMOVED = > | (360) 650-3944<tel:(360)%20650-3944>
>
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of
> Swift, Daniel P. < = EMAIL ADDRESS REMOVED = >
> Sent: Wednesday, October 30, 2019 10:45 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Skip nav links on mobile
>
> I think you are referring to a 'skip to content' link ... ? I think it
> might be advantageous to keep the link assuming that there is a fair amount
> of fluff at the top of the page.
>
> Dan Swift
> Senior Web Specialist
> University Communications and Marketing
> West Chester University
> 610.738.0589
>
>
From: Birkir R. Gunnarsson
Date: Wed, Oct 30 2019 1:10PM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
The intent of WCAG 2.4.1 is to allow users to quickly navigate past
blocks of content.
To meet this requirement you technically only have to implement one of
a sip link, ARIA landmarks or a logical heading structure (but for
practical purposes a skip link on desktop is important if the header
is full of, well, crap, at least from the point of view of someone
using the keeboard who needs to quickly get to the main content of the
page, e.g. if it contains a form).
So collapsing the header, as you do on the mobile view, achieves the
same outcome as the skip link, it makes it easy to navigate to the
main content of the page.
Adding a skip link in that scenario is basically adding a tab stop to
skip a tab stop, which really doesn't make much sense from a practical
perspective, add in the valuable screen space on smaller devices that
depend on hiding all non-essential content and the skip link really
doesn't make much sense.
Just make sure that, to comply with the exact language of the
requirement, you need to keep headings or landmarks on the mobile view
as well.
On 10/30/19, Lucy GRECO < = EMAIL ADDRESS REMOVED = > wrote:
> hello:
> actually what is beeing asked here is if the fluf is all in one place i.e.
> the hamburger menu can you omit the skip to. and i say yes if i have to
> swipe one to a skip and then to a hamburger and then i am in the content
> on the next swipe then why have that tab stop for the skip i say yes remove
> the skip if its only skipping one thing. just my thought
> Lucia Greco
> Web Accessibility Evangelist
> IST - Architecture, Platforms, and Integration
> University of California, Berkeley
> (510) 289-6008 skype: lucia1-greco
> http://webaccess.berkeley.edu
> Follow me on twitter @accessaces
>
>
>
> On Wed, Oct 30, 2019 at 10:48 AM Carly Gerard < = EMAIL ADDRESS REMOVED = > wrote:
>
>> There are also use cases of keyboards being used with mobile devices, so
>> removing the skip to main content link could block those users from
>> bypassing the navigation and other fluff before the main content.
>>
>> Carly
>>
>> [Western logo]
>>
>> Carly Gerard | She/Her/Hers
>> Web Accessibility Engineer | Web Communication Technologies
>> Western Washington University
>> 516 High Street, Bellingham WA 98225
>> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > | = EMAIL ADDRESS REMOVED = <mailto:
>> = EMAIL ADDRESS REMOVED = > | (360) 650-3944<tel:(360)%20650-3944>
>>
>> >> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of
>> Swift, Daniel P. < = EMAIL ADDRESS REMOVED = >
>> Sent: Wednesday, October 30, 2019 10:45 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> Subject: Re: [WebAIM] Skip nav links on mobile
>>
>> I think you are referring to a 'skip to content' link ... ? I think it
>> might be advantageous to keep the link assuming that there is a fair
>> amount
>> of fluff at the top of the page.
>>
>> Dan Swift
>> Senior Web Specialist
>> University Communications and Marketing
>> West Chester University
>> 610.738.0589
>>
>>
From: Sailesh Panchang
Date: Wed, Oct 30 2019 1:57PM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
On the mobile device, the hamburger menu implements:
Using an expandable and collapsible menu to bypass block of content
https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR28.html
And thus passes SC 2.4.1
Thanks,
Sailesh
On 10/30/19, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> The intent of WCAG 2.4.1 is to allow users to quickly navigate past
> blocks of content.
> To meet this requirement you technically only have to implement one of
> a sip link, ARIA landmarks or a logical heading structure (but for
> practical purposes a skip link on desktop is important if the header
> is full of, well, crap, at least from the point of view of someone
> using the keeboard who needs to quickly get to the main content of the
> page, e.g. if it contains a form).
>
> So collapsing the header, as you do on the mobile view, achieves the
> same outcome as the skip link, it makes it easy to navigate to the
> main content of the page.
> Adding a skip link in that scenario is basically adding a tab stop to
> skip a tab stop, which really doesn't make much sense from a practical
> perspective, add in the valuable screen space on smaller devices that
> depend on hiding all non-essential content and the skip link really
> doesn't make much sense.
> Just make sure that, to comply with the exact language of the
> requirement, you need to keep headings or landmarks on the mobile view
> as well.
>
>
> On 10/30/19, Lucy GRECO < = EMAIL ADDRESS REMOVED = > wrote:
>> hello:
>> actually what is beeing asked here is if the fluf is all in one place
>> i.e.
>> the hamburger menu can you omit the skip to. and i say yes if i have to
>> swipe one to a skip and then to a hamburger and then i am in the
>> content
>> on the next swipe then why have that tab stop for the skip i say yes
>> remove
>> the skip if its only skipping one thing. just my thought
>> Lucia Greco
>> Web Accessibility Evangelist
>> IST - Architecture, Platforms, and Integration
>> University of California, Berkeley
>> (510) 289-6008 skype: lucia1-greco
>> http://webaccess.berkeley.edu
>> Follow me on twitter @accessaces
>>
>>
>>
>> On Wed, Oct 30, 2019 at 10:48 AM Carly Gerard < = EMAIL ADDRESS REMOVED = > wrote:
>>
>>> There are also use cases of keyboards being used with mobile devices, so
>>> removing the skip to main content link could block those users from
>>> bypassing the navigation and other fluff before the main content.
>>>
>>> Carly
>>>
>>> [Western logo]
>>>
>>> Carly Gerard | She/Her/Hers
>>> Web Accessibility Engineer | Web Communication Technologies
>>> Western Washington University
>>> 516 High Street, Bellingham WA 98225
>>> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > | = EMAIL ADDRESS REMOVED = <mailto:
>>> = EMAIL ADDRESS REMOVED = > | (360) 650-3944<tel:(360)%20650-3944>
>>>
>>> >>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of
>>> Swift, Daniel P. < = EMAIL ADDRESS REMOVED = >
>>> Sent: Wednesday, October 30, 2019 10:45 AM
>>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>>> Subject: Re: [WebAIM] Skip nav links on mobile
>>>
>>> I think you are referring to a 'skip to content' link ... ? I think it
>>> might be advantageous to keep the link assuming that there is a fair
>>> amount
>>> of fluff at the top of the page.
>>>
>>> Dan Swift
>>> Senior Web Specialist
>>> University Communications and Marketing
>>> West Chester University
>>> 610.738.0589
>>>
>>>
From: glen walker
Date: Wed, Oct 30 2019 3:05PM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
Just a minor nit on what Birkir said about "To meet this requirement you
technically only have to implement one of a sip link, ARIA landmarks or a
logical heading structure". I know Birkir didn't mean that those were the
only options but I wanted to explicitly point that out in case some of the
newer people on this list didn't realize that. 2.4.1 only says a
"mechanism" must exist to bypass blocks of content. It does not say what
that mechanism should be. Sailesh's comment about the menu being collapsed
is a "mechanism" to handle that, although if you don't get the collapsed
menu on desktop, you would need some other mechanism, which is typically
one of the options Birkir mentioned.
From: Greg Jellin
Date: Wed, Oct 30 2019 4:17PM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
I love this group. Great discussion. This really helps clarify my
understanding. I agree, that bypassing blocks can be done a number of
ways. In this specific case a client had a skip link above the nav that
jumped to the main content and I felt it was just adding an extra step
with the nav collapsed on the mobile version.
Greg
On 10/30/2019 2:05 PM, glen walker wrote:
> Just a minor nit on what Birkir said about "To meet this requirement you
> technically only have to implement one of a sip link, ARIA landmarks or a
> logical heading structure". I know Birkir didn't mean that those were the
> only options but I wanted to explicitly point that out in case some of the
> newer people on this list didn't realize that. 2.4.1 only says a
> "mechanism" must exist to bypass blocks of content. It does not say what
> that mechanism should be. Sailesh's comment about the menu being collapsed
> is a "mechanism" to handle that, although if you don't get the collapsed
> menu on desktop, you would need some other mechanism, which is typically
> one of the options Birkir mentioned.
> > > >
From: Birkir R. Gunnarsson
Date: Wed, Oct 30 2019 4:50PM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
Good point.
To further minimize potential confusion, I meant to call it "skip
link" not "sip link". As far as I know, a sip link is not a widely
accepted HTML or WCAG phenomenon, not even on booze related websites.
On 10/30/19, Greg Jellin < = EMAIL ADDRESS REMOVED = > wrote:
> I love this group. Great discussion. This really helps clarify my
> understanding. I agree, that bypassing blocks can be done a number of
> ways. In this specific case a client had a skip link above the nav that
> jumped to the main content and I felt it was just adding an extra step
> with the nav collapsed on the mobile version.
>
> Greg
>
>
> On 10/30/2019 2:05 PM, glen walker wrote:
>> Just a minor nit on what Birkir said about "To meet this requirement you
>> technically only have to implement one of a sip link, ARIA landmarks or a
>> logical heading structure". I know Birkir didn't mean that those were
>> the
>> only options but I wanted to explicitly point that out in case some of
>> the
>> newer people on this list didn't realize that. 2.4.1 only says a
>> "mechanism" must exist to bypass blocks of content. It does not say what
>> that mechanism should be. Sailesh's comment about the menu being
>> collapsed
>> is a "mechanism" to handle that, although if you don't get the collapsed
>> menu on desktop, you would need some other mechanism, which is typically
>> one of the options Birkir mentioned.
>> >> >> >> > > > > >
--
Work hard. Have fun. Make history.
From: Jonathan Avila
Date: Wed, Oct 30 2019 5:54PM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
While headings and landmarks may be available to screen reader users -- navigation by these features is not built into most browsers and for some keyboard only users who don't use screen readers would require an extension or favlet be run unless a widget was placed on the site to jump to these areas. So either skip links built directly into the site or some sort of Skip to or Landmark based script would be needed to ensure the access to the widest group. These mechanisms need to be available for each block of repeated content -- so just a main element or h1 to skip to the main content might not be enough if you have multiple blocks of repeat content on a page that don't use another mechanism such as each block in a landmark or preceded by a heading.
Jonathan
From: Birkir R. Gunnarsson
Date: Wed, Oct 30 2019 7:54PM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
Jonathan
What would be your rule of thumb for how many tab stops need to be in
the block for it to be worth adding a skip link (remember that the
skip link itself adds a tab stop unless you use a dropdown of some
sort).
I'd say that there would have to be at least 5 tabstops, possibly 8 or
9 to be worth adding a skip link. And I'd rather have functionality to
collapse repeated blocks of content than inserting another keyboard
only link into it, it benefits more users.
Also, generally speaking, I've always found it a bit weird that we
assume keyboard only users are not able to install a widget to
navigate by headings or landmarks. We don't build screen reader
experience directly into the webpage, we provide semantics that are
clear and rely on the screen reader user to obtain and install the
software to take advantage of it.
Speech recognition software does (and if it doesn't, that's on the
vendors of that software to fix it).
Why is keyboard navigation any different? Implementing a keyboard
navigation widget to jump to landmarks or headings is infinitely
easier than writing a screen reader, yet we always assume that
keyboard only users are not able to find, install or use such a
widget.
I'm not disagreeing with your assertion, the fact we've always taken
this stance as a community is just a question that has bothered me for
some time.
On 10/30/19, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
> While headings and landmarks may be available to screen reader users --
> navigation by these features is not built into most browsers and for some
> keyboard only users who don't use screen readers would require an extension
> or favlet be run unless a widget was placed on the site to jump to these
> areas. So either skip links built directly into the site or some sort of
> Skip to or Landmark based script would be needed to ensure the access to the
> widest group. These mechanisms need to be available for each block of
> repeated content -- so just a main element or h1 to skip to the main content
> might not be enough if you have multiple blocks of repeat content on a page
> that don't use another mechanism such as each block in a landmark or
> preceded by a heading.
>
> Jonathan
>
>
From: Jonathan Avila
Date: Wed, Oct 30 2019 8:26PM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
Hi Birkir, the understanding document for 2.4.1 seems to only allow for blocks of repeated content that are small. It states "Small repeated sections such as individual words, phrases or single links are not considered blocks for the purposes of this provision."
In terms of installing a plug-in or extension -- in my experience this is not practical on mobile browsers most which don't support any extensions although a favlet could be run if the content security policy of the site didn't block it. But yes, your argument is one that I've also seen around focus -- why require developers to provide good visual focus when we can just have a focus extension. Why require developers to indicate languages when computers today can detect different languages. So it's a balance. Ultimately, most of us would like to see these features built into browsers on all devices -- but that doesn't seem to be happening.
Jonathan
From: Mallory
Date: Thu, Oct 31 2019 9:44AM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
Do we still need the caveat of "the skip link must be visible on mobile" as well?
I'm thinking about this https://axesslab.com/skip-links/ where the issue basically seems to only be caused by the usual technique we use of hiding skip links until someone Tabs to them-- however there's no rule that skip links have to be hidden.
The tabindex thing for the destination is already being used by many to get around a still-existing IE11 bug as well as any ancient blinks and current webkits which still don't entirely do the "move focus" thing correctly, but apparently this doesn't fix all mobile platforms.
cheers,
_mallory
From: Patrick H. Lauke
Date: Thu, Oct 31 2019 10:55AM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
On 31/10/2019 15:44, Mallory wrote:
> Do we still need the caveat of "the skip link must be visible on mobile" as well?
Sighted mobile+keyboard users (they do exist) will still need to be able
to see the link (at least when it receives focus) ... it's not just
about non-sighted AT users, even on mobile.
> I'm thinking about this https://axesslab.com/skip-links/ where the issue basically seems to only be caused by the usual technique we use of hiding skip links until someone Tabs to them-- however there's no rule that skip links have to be hidden.
The main problem on some mobile platforms are the "clever" heuristics
that browsers+AT still use there...
Of course, if you CAN get away with having an always-visible skip link,
more power to you. Additionally, some browser/AT combos on mobile are
working towards fixing their heuristics/bugs, so there's hope even there
that at some not to distant point, the skip links will work there just
as they do on desktop...
> ancient blinks
Thought you were talking about older blind users there for a second ;)
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: Sean Murphy
Date: Fri, Nov 01 2019 2:58AM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
What about search fields or simular first feild for forms?
My experience is the part
> On 1 Nov 2019, at 3:55 am, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
>
>> On 31/10/2019 15:44, Mallory wrote:
>> Do we still need the caveat of "the skip link must be visible on mobile" as well?
>
> Sighted mobile+keyboard users (they do exist) will still need to be able to see the link (at least when it receives focus) ... it's not just about non-sighted AT users, even on mobile.
>
>> I'm thinking about this https://axesslab.com/skip-links/ where the issue basically seems to only be caused by the usual technique we use of hiding skip links until someone Tabs to them-- however there's no rule that skip links have to be hidden.
>
> The main problem on some mobile platforms are the "clever" heuristics that browsers+AT still use there...
>
> Of course, if you CAN get away with having an always-visible skip link, more power to you. Additionally, some browser/AT combos on mobile are working towards fixing their heuristics/bugs, so there's hope even there that at some not to distant point, the skip links will work there just as they do on desktop...
>
>> ancient blinks
>
> Thought you were talking about older blind users there for a second ;)
>
> 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: mhysnm1964
Date: Fri, Nov 01 2019 7:26PM
Subject: Re: Skip nav links on mobile
← Previous message | Next message →
Don't forget there are users who use keyboards on mobile or technology
which leverage the keyboard support on mobile technology. Thus what Patrick
stated is valid for the mobile platform. In fact, a screen reader user might
use it on the mobile platform to make it easier to jump to a location.
From: Mallory
Date: Sat, Nov 02 2019 9:09AM
Subject: Re: Skip nav links on mobile
← Previous message | No next message
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Patrick H. Lauke
> Sent: Friday, 1 November 2019 3:56 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] Skip nav links on mobile
>
>Sighted mobile+keyboard users (they do exist) will still need to be able
to see the link (at least when it receives focus)
I didn't realise anyone made skip links that didn't at least appear on focus. To me, skip links are primarily for plain-keyboard users, usually with vision, and that's why we have to keep reminding people not to rely on things like landmarks and headings to do that work.
I meant, always-visible, due to how the Android issues were described.
cheers,
_mallory