时间戳

首页 > 解决方案 > 输入标签上的 aria-label 不读取 Android chrome

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

问题描述

Android Chrome 上没有读取 aria-label，例如：

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

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

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

其他人见过这个问题吗？

标签： javascripthtmlangular5accessibilitywai-aria

解决方案

这将是 android/chrome 的一个明显错误。该aria-label属性是可用于任何元素的全局属性（请参阅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”类用于在视觉上隐藏 sr，<label>但它仍然可供屏幕阅读器阅读。请参阅Bootstrap 3 中的 sr-only 是什么？）

推荐阅读