屏幕阅读器应读取 aria-label 并忽略带有 for 属性的标签

Question

我目前正在编写一个具有适当残疾访问权限的 html 表单。我有带有 for 属性的标签标记的输入。但现在我希望一个输入为屏幕阅读器获得与标签显示不同的文本：

<div class="cc_form_w50 t5">
  <label id="lbl_city" for="input_city">City / Town</label>
</div>
<div class="cc_form_w50 t5">
  <input type="text" required name="city" title="City / Town" placeholder="Enter your city or town" class="w100" id="input_city">
</div>

屏幕阅读器准备好“/”作为系统语言中的符号，所以我想让屏幕阅读器改为“或”，就像标题或占位符一样。只要我使用“for”属性或“aria-labelledby”，标签的文本就会被读取。阅读器会忽略任何“aria-label”属性。

如果没有“for”属性，光标不会通过选择标签进入输入。

是否可以告诉屏幕阅读器阅读标签标签内容以外的其他内容？

Answer 1

有两种方法可以修复它。

第一个向屏幕阅读器隐藏“/”（使用aria-hidden），然后添加屏幕阅读器读取的视觉隐藏文本。您可以在 sr-only 类上进行谷歌搜索。它来自引导程序，但许多其他框架也定义了它。你可以从这个stackoverflow answer复制类的定义。

<div>
  <label for="input_city">City <span aria-hidden="true">/</span> <span class="sr-only">or</span> Town</label>
</div>
<div>
  <input type="text" required name="city" placeholder="Enter your city or town" id="input_city">
</div>

另一种解决方法（这更简单）是从屏幕阅读器完全隐藏标签（再次使用aria-hidden），然后在<input> 上指定aria-label。

<div>
  <label for="input_city" aria-hidden="true">City / Town</label>
</div>
<div>
  <input type="text" required name="city" placeholder="Enter your city or town" id="input_city" aria-label="city or town">
</div>

这两种解决方案仍然允许鼠标用户单击标签并将焦点移动到<input> 字段。

我还删除了title（工具提示）属性，因为它带有标签、占位符和工具提示似乎有点矫枉过正。此外，某些屏幕阅读器在阅读时错误地在标签名称中包含工具提示，因此如果您有工具提示，有时您仍会听到标签中的“/”。 （工具提示是在确定元素的可访问名称时检查的 last 属性。参见“Accessible Name and Description Computation”中的步骤 2I）