Bootstrap: skiplinks not working correctly in iOS/Safari+VoiceOver and Android/Chrome+TalkBack

[stevenbriscoeca]

Hello,

Operating system and version :
Nexus 5 Android with Talkback

Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
Chrome 52.0.2746.98

Reduced test cases and potential fixes using
http://codepen.io/stephendesjardins/pen/EgyNrL
http://s.codepen.io/stephendesjardins/debug/EgyNrL#content

As much detail as possible for what we should add and why it's important to Bootstrap
When I use talkback on android with a skiplink :
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>

It says : double tap to activate, and when I do just that it doesn't go to the content div. If I remove sr-only sr-only-focusable it ends up working correctly.

Skip links does not work on this reduce test case. I think it is important to Bootstrap because the users that uses talkback on their Android Phone will not be able to skip links.

[stevenbriscoeca]

Additionally, on IOS the skip link appears, but disappears after a few seconds...I cannot access the skiplink.

[patrickhlauke]

interestingly, this seems to come down to some subtly broken implementations in both iOS/Safari and Android/Chrome. i'll need to investigate the specific cause of this...

[cvrebert]

The pen uses Bootstrap 3. Is Bootstrap 4 also affected?

[stevenbriscoeca]

@cvrebert Bootstrap 4 is also affected http://codepen.io/stephendesjardins/pen/ZpOXgv

cc @patrickhlauke

[ffoodd]

Working on a Pull Request for Boosted, it seems that position: static in .sr-only-focusable is causing the bug on VoiceOver.

@PigeardSylvain just found this. It might cause side effects, but might be tested.

[patrickhlauke]

it seems that position: static in .sr-only-focusable is causing the bug on VoiceOver.

thanks for the pointer. this is on my to-do list of things to explore, so that definitely helps narrow it down @ffoodd @PigeardSylvain

[patrickhlauke]

the specific problem with voiceover here seems to be unrelated to CSS altogether...(at least in my testing, even completely removing the bootstrap CSS on one of my test pages results in VO getting very confused about where it is/what it should listen to...)

further testing required (may well be a fundamental Safari/VO bug)

[patrickhlauke]

the fundamental issue here seems to be a Chrome/TalkBack bug - see https://bugs.chromium.org/p/chromium/issues/detail?id=657157

[ffoodd]

@patrickhlauke Reading filled bugs, as I understand this it seems that focus management is somehow surprising in TalkBack and Narrator at least.

But VoiceOver manages focus correctly, doesn't it? Is there still a bug on VO too?

[patrickhlauke]

There is a separate bug in iOS/VO concerning links to fragment identifiers - currently putting together a test case to submit to Apple...

[patrickhlauke]

Bug in iOS10/VoiceOver/Safari relating to links to fragment identifiers, when the container also has a tabindex attribute (used to overcome focus issues in some browsers, and a fairly common technique) https://bugs.webkit.org/show_bug.cgi?id=163658

[patrickhlauke]

In short: Bootstrap's skip links (which are not unusualy, and based on very common techniques) are currently broken in both Android/TalkBack and iOS/VoiceOver, due to fundamental bugs in those two environments...will get onto filing these on the wall of browser bug shame later today _sigh_

[patrickhlauke]

Further, there is a bug in WebKit relating to links/destinations with fragment identifiers https://bugs.webkit.org/show_bug.cgi?id=116046 which also causes fun issues like this https://www.youtube.com/watch?v=LvlM8Z71oWE

[patrickhlauke]

For completeness, there are related bugs in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1000082 and Edge https://microsoftaccessibility.uservoice.com/forums/307429-microsoft-accessibility-feedback/suggestions/16717318-focusable-elements-should-fire-focus-event-recei concerning AT focus and how it currently does NOT trigger the focus event and :focus styles. This makes hidden skip links that appear on focus useless for sighted/partially-sighted AT users on those platforms.

Note that the Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=657157 has just been fixed, so should make it into next version of Chrome/Android.

Added the bugs and feature requests to the relevant docs in our documentation. https://github.com/twbs/bootstrap/pull/21089

[patrickhlauke]

Closing this issue, as the ball is now in the browsers' court to address their shortcomings, and this is nothing specific to Bootstrap anymore