javascript - 输入标签上的 aria-label 无法读取 Android chrome

Question

aria-label 未在 Android Chrome 上读取，例如:

<input aria-label="test" type="text">

在 Android chrome 上，它显示为“编辑框，双击以编辑，双击以输入文本”。

但同样的东西在 iOS chrome 上被读作“测试，文本字段，双击以编辑”。

还有其他人见过这个问题吗？

Answer 1

那将是 android/chrome 的一个明显错误。 aria-label attribute 是一个全局属性，可用于任何元素(参见 https://www.w3.org/TR/wai-aria/#global_states )。

如果你尝试 aria-labelledby 会发生什么？

<span id="foo" style="display:none">test</span>
<input aria-labelledby="foo" type="text">

android/chrome 会读取吗？

<label> 发生了什么元素？

<label for="myid" class="sr-only">test</label>
<input id="myid" type="text">

android/chrome 会读取吗？

(“sr-only”类用于在视觉上隐藏 <label>，但它仍然可供屏幕阅读器阅读。参见 What is sr-only in Bootstrap 3?)