Base theme: skip to main links do not work on IOS using VoiceOver

[dfarough]

I saw the following content on the WEBAIM list serve. so maybe someone can look into this. I suspect that this would apply to all skip to main links on all WET pages. I tried using my Iphone and the focus does seem to move on to the reload link when voiceover speaks the skip to main link.

I will paste some of the content from the list below.

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

[dfarough]

@wet-boew/access-working-group
I forgot to include the Access working group tag to this issue.
the skip to main links do not work using IOS 8.1.3 with VoiceOver. I can not say forcertain that they ever worked since I have never tested WET with VoiceOver before.

[SBleeks]

Hi David,

It’s great to hear that someone is finally doing testing using voice Over and Safari.

Are you testing with your own phone or is this a work phone?

Thanks,

Stacy

From: dfarough [mailto:[email protected]]
Sent: Monday, February 02, 2015 11:26 AM
To: wet-boew/theme-base
Cc: SBleeks
Subject: Re: [theme-base] Base theme: skip to main links do not work on IOS using VoiceOver (#102)

@wet-boew/access-working-grouphttps://github.com/orgs/wet-boew/teams/access-working-group
I forgot to include the Access working group tag to this issue.
the skip to main links do not work using IOS 8.1.3 with VoiceOver. I can not say forcertain that they ever worked since I have never tested WET with VoiceOver before.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/102#issuecomment-72486435.

[jrowsell]

VoiceOver in my experience does not like the CSS props of wb-invisible.

From: dfarough [mailto:[email protected]]
Sent: February-02-15 11:26 AM
To: wet-boew/theme-base
Cc: Juli Rowsell
Subject: Re: [theme-base] Base theme: skip to main links do not work on IOS using VoiceOver (#102)

@wet-boew/access-working-grouphttps://github.com/orgs/wet-boew/teams/access-working-group
I forgot to include the Access working group tag to this issue.
the skip to main links do not work using IOS 8.1.3 with VoiceOver. I can not say forcertain that they ever worked since I have never tested WET with VoiceOver before.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/102#issuecomment-72486435.

[LaurentGoderre]

The skip links are not offscreen in WET though and we don't use any javascript on them (correct me if I'm wrong @pjackson28)

[LaurentGoderre]

Is this a bug that can be submitted to VoiceOver? These styles should not disrupt anything

[pjackson28]

Do you know what version of WET this is happening on? Can you reproduce with the live working examples?

I find it puzzling as WET doesn't use any JavaScript for the Skip to main content link, it is all done through CSS. It is initially hidden with CSS and then is revealed with CSS when it gains focus.

The only possible cause I can think of is in v3.x we used jQuery Mobile which was very heavy-handed with JavaScript so created focus issues. That is one of the reasons why we stopped using that framework.

Could you please check with the live working examples to confirm whether or not it is an issue with the current versions of WET?

[LaurentGoderre]

@jrowsell the issue with wb-inv or wb-invisible, is it the same for WET4 than it is for WET3?

[pjackson28]

Another possible cause is if the href of the skip link has no corresponding target. On the test page, does the skip link shift focus to the h1 element when activated (when testing with other browsers/screen readers)? This is to help determine if the issue is with just the test page.

Also, if there is an issue with how VoiceOver handles certain CSS properties, then has an issue been filed with VoiceOver?

[LaurentGoderre]

The skip link on this page works well without any AT http://wet-boew.github.io/themes-dist/theme-base/index-en.html

[jrowsell]

If using a mobile device it could be from various scenarios including many reported and documented issues with VoiceOver regarding tapped events.

Paul is right about some issues with making VoiceOver read links from the target aswell.
Voiceover in general doesn’t handle internal links in a way that often gives access to the user.
The issues get even more tricky if you use VoiceOver with Braille display turned on.

From: Laurent Goderre [mailto:[email protected]]
Sent: February-02-15 12:02 PM
To: wet-boew/theme-base
Cc: Juli Rowsell
Subject: Re: [theme-base] Base theme: skip to main links do not work on IOS using VoiceOver (#102)

The skip link on this page works well without any AT http://wet-boew.github.io/themes-dist/theme-base/index-en.html

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/102#issuecomment-72493704.

[dfarough]

I was testing with my IPhone. This was the live examples I was testing with.and is version 8.1.3 of IOS.I will test with my Ipad at home. I have not updated the IPad lately so the different form factor and OS version may produce different results.

When I swipe right from the address field, focus seems to move directly to the skip to main link, and then VoiceOver speaks the reload link. If I try to double tap the skip to main link often the keyboard appears so that I can edit the url. I am also having difficulty activating the basic html link. This may be due to my clumsy fat fingers and the size of my IPhone. so I'll be interested to experience this on my IPad.

[jrowsell]

@dfarough tapped events have documented issues with VoiceOver it is listed is a moderate to major bug when I last checked a few weeks ago.
VoiceOver doesn’t received notification that the tapped event occurred on a mobile platform.

From: dfarough [mailto:[email protected]]
Sent: February-02-15 12:12 PM
To: wet-boew/theme-base
Cc: Juli Rowsell
Subject: Re: [theme-base] Base theme: skip to main links do not work on IOS using VoiceOver (#102)

I was testing with my IPhone. This was the live examples I was testing with.and is version 8.1.3 of IOS.I will test with my Ipad at home. I have not updated the IPad lately so the different form factor and OS version may produce different results.

When I swipe right from the address field, focus seems to move directly to the skip to main link, and then VoiceOver speaks the reload link. If I try to double tap the skip to main link often the keyboard appears so that I can edit the url. I am also having difficulty activating the basic html link. This may be due to my clumsy fat fingers and the size of my IPhone. so I'll be interested to experience this on my IPad.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/102#issuecomment-72495689.

[jrowsell]

@lgoderre are we using and aria-hidden in WET4? I don’t recall noticing it anywhere yet.
Currently there are significant drawbacks to using it and the use of VoiceOver.

From: Laurent Goderre [mailto:[email protected]]
Sent: February-02-15 11:38 AM
To: wet-boew/theme-base
Cc: Juli Rowsell
Subject: Re: [theme-base] Base theme: skip to main links do not work on IOS using VoiceOver (#102)

@jrowsellhttps://github.com/jrowsell the issue with wb-inv or wb-invisible, is it the same for WET4 than it is for WET3?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/102#issuecomment-72488812.

[LaurentGoderre]

@jrowsell we do use ARIA when it makes sense. Do you think there is some ARIA that can help solve this issue?

[dfarough]

given the current situation with these hidden skip links, I am wondering if we should consider either making them visible to all or moving them to a navigation section. given they are primarily for accessibility purposes, it is clear to me that they do not serve this purpose for IOS mobile users. I am less concerned about the skip to main link since we are using proper heading structure and landmark roles in WET. I am however more concerned about the basic HTML or Standard links which exhibit the same behaviour

One of the things recommended by one person on webaim was .the following: bootstrap link:
http://getbootstrap.com/getting-started/#accessibility
I found that when I tested this on my IPhone using VoiceOver, that the viewport would scroll properly to the main section, but that the focus as far as VoiceOvver was concerned remained on the Skip link.

The other suggestion that was provided was the Paciello group site: http://www.paciellogroup.com
Using VoiceOver in IOS 8.1.3 causes VoiceOver to freeze on my Iphone 4s.
Can we get these tested on Android using other AT?

[LaurentGoderre]

Bootstrap point to this article from it's code which is pretty much what we have

http://a11yproject.com/posts/how-to-hide-content/

[pjackson28]

Keep in mind also that a large part of the focus issues you identify are the fault of Safari. Safari and Chrome have since the start not shifted focus for same-page links. Those two browsers only visually scroll the page but either leave the focus on the activated link or put it on the body element (which is even worse). We try to address that in WET by forcing the focus change to the link target but that can be complicated to manage, particularly with touch events. Ideally this problem would be fixed in the browser itself so we wouldn't have to build all these complicated workarounds.