163658 2016-10-19 03:05:03 -0700 AX: link to container with fragment identifier that has tabindex results in container not being read and ignored by VoiceOver 2022-02-08 23:09:53 -0800 1 1 1 Unclassified WebKit Accessibility Safari 10 iPhone / iPad iOS 10 NEW InRadar P2 Normal --- 159753 1 redux webkit-unassigned bfulgham jcraig keeganstreet webkit-bug-importer webkit oldest_to_newest 1241884 0 292058 redux 2016-10-19 03:05:03 -0700 Created attachment 292058 Test case Due to focus management issues in some browsers, one common approach for skip links is to link to a container with an id that also has an explicit tabindex attribute, making it focusable. <a href="#content">Skip to main content</a> ... <div id="content" tabindex="-1">...</div> However, it seems that this sort of (fairly common) skip link pattern breaks in iOS10/VoiceOver/Safari. Specifically, it seems that if the target container has a tabindex attribute, VoiceOver does move the accessibility focus to the container, but announces nothing. But more worryingly, it then seems to ignore that entire target container - swiping left/right simply jumps over that container as if it wasn't in the document at all (though if you swipe long enough to get into the Safari UI and back, it seems to usually sort itself out again). This is making fairly common skip links (for instance, those used in Bootstrap-based sites, if they follow the advice given in the BS documentation) completely unusable. See attached test case and the video at https://www.youtube.com/watch?v=JUlSav9Nm_4 (the first skip link works, but the other two skip links - to a <div id="..." tabindex="0"> and <div id="..." tabindex="-1"> - exhibit this broken behavior) 1241885 1 webkit-bug-importer 2016-10-19 03:05:18 -0700 <rdar://problem/28844157> 1241890 2 redux 2016-10-19 05:18:03 -0700 Possibly worth noting: the reason why authors do set explicit tabindex is, among other things, this https://bugs.webkit.org/show_bug.cgi?id=116046 (to force keyboard interaction with skip links to work correctly) 1241915 3 jcraig 2016-10-19 08:27:19 -0700 Relating bug 158430 1324162 4 keeganstreet 2017-06-29 17:01:31 -0700 I am finding that even if the target does not have a tabindex attribute, VoiceOver highlights the target but does not read it, and then it ignores the target container completely. Test case: https://codepen.io/keeganstreet/pen/VWyGyv 1839026 5 bfulgham 2022-02-08 23:09:53 -0800 This is actually being tracked under: <rdar://39953581> 292058 2016-10-19 03:05:03 -0700 2016-10-19 03:05:03 -0700 Test case skipnavtest.html text/html 5657 redux DQo8IURPQ1RZUEUgaHRtbD4NCjxodG1sIGxhbmc9ImVuIj4NCjxoZWFkPg0KCTxtZXRhIGNoYXJz ZXQ9InV0Zi04Ij4NCgk8dGl0bGU+U2tpcCBOYXZpZ2F0aW9uIFRlc3QgKG1vZGlmaWVkKTwvdGl0 bGU+DQo8L2hlYWQ+DQo8Ym9keT4NCjxkaXYgaWQ9InNraXByb3cxIj4NCgk8YSBocmVmPSIjdGFy Z2V0MSI+U2tpcCB0byB0YXJnZXQgMTwvYT4NCgk8YSBocmVmPSIjdGFyZ2V0MiI+U2tpcCB0byB0 YXJnZXQgMjwvYT4NCgk8YSBocmVmPSIjdGFyZ2V0MyI+U2tpcCB0byB0YXJnZXQgMzwvYT4NCjwv ZGl2Pg0KDQo8aDE+U2tpcCBOYXZpZ2F0aW9uIFRlc3Q8L2gxPg0KPHA+UmVkdWNlZCB0ZXN0IGNh c2UgYmFzZWQgb24gPGEgaHJlZj0iaHR0cDovL3RlcnJpbGx0aG9tcHNvbi5jb20vdGVzdHMvc2tp cHRlc3QuaHRtbCI+VGVycmlsbCBUaG9tcHNvbidzIFNraXAgTmF2aWdhdGlvbiBUZXN0PC9hPi48 L3A+DQoNCjxwPkZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcu IEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBj b250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRv IGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNv bWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJs ZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxp bmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxl ciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50 IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNl IHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlz aWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3Jv bGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZp bGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250 ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZv cmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUg dmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBz Y3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcu IEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBj b250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRv IGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNv bWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJs ZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxp bmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxl ciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50 IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNl IHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlz aWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3Jv bGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZp bGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250 ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZv cmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUg dmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBz Y3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcu IEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBj b250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRv IGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNv bWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJs ZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxp bmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxl ciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50 IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNl IHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlz aWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3Jv bGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZp bGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250 ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZv cmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUg dmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBz Y3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcu IEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBj b250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRv IGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNv bWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJs ZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxp bmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxl ciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50 IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNl IHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlz aWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3Jv bGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZp bGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250 ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZv cmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUg dmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBz Y3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcu IEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBj b250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRv IGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNv bWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJs ZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxp bmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxl ciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50 IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNl IHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlz aWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3Jv bGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZp bGxlciBjb250ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250 ZW50IHRvIGZvcmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIEZpbGxlciBjb250ZW50IHRvIGZv cmNlIHNvbWUgdmlzaWJsZSBzY3JvbGxpbmcuIDwvcD4NCg0KPGRpdiBpZD0idGFyZ2V0MSI+DQoJ PGgyPlRhcmdldCA8L2gyPg0KCTxwPlRoaXMgdGFyZ2V0IGhhcyBhbiA8Y29kZT5pZDw8L2NvZGU+ IGF0dHJpYnV0ZSBvbiBhIDxjb2RlPmRpdjwvY29kZT4gdGhhdCBjb250YWlucyBib3RoIHRoZSBo ZWFkaW5nIGFuZCB0aGlzIHBhcmFncmFwaC4gPGEgaHJlZj0iIyI+RHVtbXkgbGluazwvYT4uPC9w Pg0KPC9kaXY+DQoNCjxkaXYgaWQ9InRhcmdldDIiIHRhYmluZGV4PSIwIj4NCgk8aDI+VGFyZ2V0 IDwvaDI+DQoJPHA+VGhpcyB0YXJnZXQgaGFzIGFuIDxjb2RlPmlkPDwvY29kZT4gYXR0cmlidXRl IGFuZCA8Y29kZT50YWJpbmRleD0iMCI8L2NvZGU+IG9uIGEgPGNvZGU+ZGl2PC9jb2RlPiB0aGF0 IGNvbnRhaW5zIGJvdGggdGhlIGhlYWRpbmcgYW5kIHRoaXMgcGFyYWdyYXBoLiA8YSBocmVmPSIj Ij5EdW1teSBsaW5rPC9hPi48L3A+DQo8L2Rpdj4NCg0KPGRpdiBpZD0idGFyZ2V0MyIgdGFiaW5k ZXg9Ii0xIj4NCgk8aDI+VGFyZ2V0IDwvaDI+DQoJPHA+VGhpcyB0YXJnZXQgaGFzIGFuIDxjb2Rl PmlkPDwvY29kZT4gYXR0cmlidXRlIGFuZCA8Y29kZT50YWJpbmRleD0iLTEiPC9jb2RlPiBvbiBh IDxjb2RlPmRpdjwvY29kZT4gdGhhdCBjb250YWlucyBib3RoIHRoZSBoZWFkaW5nIGFuZCB0aGlz IHBhcmFncmFwaC4gPGEgaHJlZj0iIyI+RHVtbXkgbGluazwvYT4uPC9wPg0KPC9kaXY+DQoNCjwv Ym9keT4NCjwvaHRtbD4=