skiplinks not working correctly in iOS/Safari+VoiceOver and Android/Chrome+TalkBack #20732
Comments
|
Additionally, on IOS the skip link appears, but disappears after a few seconds...I cannot access the skiplink. |
|
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
changed the title
|
The pen uses Bootstrap 3. Is Bootstrap 4 also affected? |
|
@cvrebert Bootstrap 4 is also affected http://codepen.io/stephendesjardins/pen/ZpOXgv |
|
Working on a Pull Request for Boosted, it seems that @PigeardSylvain just found this. It might cause side effects, but might be tested. |
thanks for the pointer. this is on my to-do list of things to explore, so that definitely helps narrow it down @ffoodd @PigeardSylvain |
|
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) |
|
the fundamental issue here seems to be a Chrome/TalkBack bug - see https://bugs.chromium.org/p/chromium/issues/detail?id=657157 |
|
@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? |
|
There is a separate bug in iOS/VO concerning links to fragment identifiers - currently putting together a test case to submit to Apple... |
|
Bug in iOS10/VoiceOver/Safari relating to links to fragment identifiers, when the container also has a |
|
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 |
|
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 |
|
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 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 |
|
Closing this issue, as the ball is now in the browsers' court to address their shortcomings, and this is nothing specific to Bootstrap anymore |
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 twbs#20732 :) Please let me know if you find any trouble with this technique. Thanks a lot!
* 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
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.
The text was updated successfully, but these errors were encountered: