屏幕阅读器无法在移动浏览器上读出复选框标签

时间:2019-01-10 22:32:06

标签: google-chrome safari accessibility voiceover talkback

使用Mobile Chrome + TalkBack以及Mobile Safari + Voiceover遇到一些屏幕阅读器问题。最初以为可能是我的代码,但是在未加载其他JS / CSS的页面上运行以下代码时遇到了相同的问题:

<body>
<input id="test" type="checkbox" name="test" value="foo">
<label for="test" id="test-label">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</label>
<button id="button" onclick="(function() { document.getElementById('test').focus(); })()">test</button>
</body>

遇到的问题相似,因为它们与焦点相关,但是表现方式不同。

在移动Chrome浏览器中 如果您打开“话语提示”并点击按钮,则焦点将设置为复选框,并且标签将在第一次读取时读取,但是在随后的按钮点击中不会这样做。之所以发生这种情况,是因为可访问性焦点不会在随后的点击中得到更新,而是始终停留在按钮上,而实际的document.activeElement焦点是在复选框上设置的。

在Mobile Safari中 这真的很奇怪。像在Chrome中启用Voiceover一样,第一次通常可以按预期运行,但是在随后的按钮轻击中,标签仅在被突然切断之前被部分读出,并且焦点有时(有时)移至地址栏。

感谢您对此有任何见解,因为它们是本机复选框:似乎这些是屏幕阅读器/移动浏览器本身的错误。

1 个答案:

答案 0 :(得分:0)

Android的行为不足为奇。 Jaws和NVDA在桌面浏览器上的行为大致相同。

使用屏幕阅读器时,您必须区分系统焦点和用户当前正在查看的位置,它们并不总是相同。

以编程方式或通过按Tab键移动系统焦点时,读取位置将与系统焦点放在同一位置。 但是,当用户通过按箭头键,快速导航键(例如H)转到下一个标题或在移动设备上通过扫掠或使用诸如转子之类的内容来阅读页面时,只有阅读光标会移动,而系统焦点仍停留在地方。

在第二次按下按钮时,由于系统焦点并没有真正移到新位置,因此阅读光标也没有移到系统光标所在的位置。 一动不动,不间断地阅读新职位。 这解释了您观察到的一般组成行为。

但是,对于iOS Safari来说,这显然是一个错误。 我在这里没有确切的答案,但是看到VO如何切断标签,很可能与其夸张的长度有关。