Question

我有一些奇怪的行为，其中Chrome屏幕阅读器两次读取标签，我无意中“修复”了它，我不确定修复是否正确。

在下面的代码示例中，我添加了一个引用输入id的aria-labelledby，它停止读取它两次，我完全被它弄糊涂了。我的意思是aria-labelledby引用标签ID，但是当我这样做时，它又开始两次读取标签：

<div>
  <label for="placeOfBirth" id="placeOfBirth-label">Place of birth<span><em>(such as town, city or province)</em></span></label>
  <div class="input-wrapper">
    <input type="text" placeholder="" autocomplete="off" value="" id="placeOfBirth" name="placeOfBirth" aria-invalid="false" aria-labelledby="placeOfBirth" aria-describedby="placeOfBirth-error" maxlength="100">
  </div>
  <div id="placeOfBirth-error" aria-hidden="true" role="alert"> </div>
</div>

然后问题是当元素具有焦点时标签没有被读取所以我将它还原为此标签但是在首次渲染表单时标签被读出两次：

<div>
  <label for="placeOfBirth" id="placeOfBirth-label">Place of birth<span><em>(such as town, city or province)</em></span></label>
  <div class="input-wrapper">
    <input type="text" placeholder="" autocomplete="off" value="" id="placeOfBirth" name="placeOfBirth" aria-invalid="false" aria-labelledby="placeOfBirth-label" aria-describedby="placeOfBirth-error" maxlength="100">
  </div>
  <div id="placeOfBirth-error" aria-hidden="true" role="alert"> </div>
</div>

Answer 1

屏幕阅读器读取两次，因为它首先读取label元素，然后读取input的替代文本。

当您将aria-labelledby设置为input自己的ID时，input的替代名称会变为空白，这很糟糕。

通过在aria-hidden="true"上设置label属性并使用aria-labelledby="placeOfBirth-label"，这可能会解决问题，因为aria-hidden对aria-labelledby引用的元素没有影响

我想补充一点，屏幕阅读器用户习惯于这种行为，文本的重复不是他们的主要问题

当aria-labelledby应用时，屏幕阅读器不一致

1 个答案: