skiplinks not working correctly in iOS/Safari+VoiceOver and Android/Chrome+TalkBack #20732

Closed
stephenbe opened this Issue Sep 16, 2016 · 15 comments

Comments

Projects
None yet
4 participants
@stephenbe

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.

@stephenbe

This comment has been minimized.

Show comment
Hide comment
@stephenbe

stephenbe Sep 16, 2016

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

stephenbe commented Sep 16, 2016

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

@patrickhlauke

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Sep 16, 2016

Member

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...

Member

patrickhlauke commented Sep 16, 2016

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...

@patrickhlauke patrickhlauke self-assigned this Sep 16, 2016

@patrickhlauke patrickhlauke changed the title from Android talkback with skiplinks to skiplinks not working correctly in iOS/Safari+VoiceOver and Android/Chrome+TalkBack Sep 16, 2016

@cvrebert cvrebert added the v3 label Sep 16, 2016

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Sep 16, 2016

Member

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

Member

cvrebert commented Sep 16, 2016

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

@stephenbe

This comment has been minimized.

Show comment
Hide comment

@cvrebert cvrebert added the v4 label Sep 16, 2016

@ffoodd ffoodd referenced this issue in Orange-OpenSource/Orange-Boosted-Bootstrap Oct 18, 2016

Closed

Improve the screen-reader only classes #13

@ffoodd

This comment has been minimized.

Show comment
Hide comment
@ffoodd

ffoodd Oct 18, 2016

Contributor

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.

Contributor

ffoodd commented Oct 18, 2016

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

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Oct 18, 2016

Member

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

Member

patrickhlauke commented Oct 18, 2016

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

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Oct 18, 2016

Member

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)

Member

patrickhlauke commented Oct 18, 2016

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

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Oct 18, 2016

Member

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

Member

patrickhlauke commented Oct 18, 2016

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

@ffoodd

This comment has been minimized.

Show comment
Hide comment
@ffoodd

ffoodd Oct 19, 2016

Contributor

@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?

Contributor

ffoodd commented Oct 19, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Oct 19, 2016

Member

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

Member

patrickhlauke commented Oct 19, 2016

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

@patrickhlauke

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Oct 19, 2016

Member

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

Member

patrickhlauke commented Oct 19, 2016

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

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Oct 19, 2016

Member

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

Member

patrickhlauke commented Oct 19, 2016

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

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Oct 19, 2016

Member

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

Member

patrickhlauke commented Oct 19, 2016

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

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Nov 5, 2016

Member

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. #21089

Member

patrickhlauke commented Nov 5, 2016

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. #21089

@patrickhlauke

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Nov 21, 2016

Member

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

Member

patrickhlauke commented Nov 21, 2016

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

twbs-savage pushed a commit to twbs-savage/bootstrap that referenced this issue Mar 10, 2017

Update _screen-reader.scss
Small improvements that could be important:
* `clip` [is deprecated](https://www.w3.org/TR/css-masking-1/#clip-property). Adding `clip-path` as progressive enhancement; the shorter notation came from @ryuran 's [suggestion](https://twitter.com/ryuran78/status/778943389819604992);
* [J. Renée Beach warned about single pixel with interfering with screen readers vocalisation](https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe#.vcd5xlpgg) solved with `white-space`.

See [the detailed post on Hugo Giraudel's blog](http://hugogiraudel.com/2016/10/13/css-hide-and-seek/).

Also kinda related to issue #20732 :)

Please let me know if you find any trouble with this technique. Thanks a lot!

mdo added a commit that referenced this issue Mar 19, 2017

Update _screen-reader.scss (#22154)
* Update _screen-reader.scss

Small improvements that could be important:
* `clip` [is deprecated](https://www.w3.org/TR/css-masking-1/#clip-property). Adding `clip-path` as progressive enhancement; the shorter notation came from @ryuran 's [suggestion](https://twitter.com/ryuran78/status/778943389819604992);
* [J. Renée Beach warned about single pixel with interfering with screen readers vocalisation](https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe#.vcd5xlpgg) solved with `white-space`.

See [the detailed post on Hugo Giraudel's blog](http://hugogiraudel.com/2016/10/13/css-hide-and-seek/).

Also kinda related to issue #20732 :)

Please let me know if you find any trouble with this technique. Thanks a lot!

* Reorder declarations

To pass Hound.
Didn't think `clip` and `clip-path` would be considered as unrelated…

* Trailing spaces

* Last trailing space?

* Remove margin: -1px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment