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

Question

我目前正在处理 html 具有适当残障通道的表格。我有带有 for-attribute 标签的输入。但现在我想要一个输入在屏幕上获得不同的文本 reader 与标签显示的不同：

<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>

屏幕reader准备好系统语言中的“/”作为符号，所以我想将屏幕reader改为"or"，比如标题或占位符。只要我使用 "for" 属性或 "aria-labelledby" 标签的文本就会被读取。任何 "aria-label" 属性都会被 reader.

忽略

没有 "for" 属性，光标不会通过选择标签进入输入。

是否可以让屏幕reader阅读label-tag内容以外的内容？

Answer 1

有两种修复方法。

首先从屏幕 readers 中隐藏“/”（使用 aria-hidden），然后添加视觉上隐藏的文本以供屏幕 readers 读取。您可以在 sr-only class 上进行 google 搜索。它来自 bootstrap 但许多其他框架也定义了它。您可以从此 Whosebug answer.

复制 class 的定义

<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）reader 然后指定一个 aria-label在 <input>.

<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（工具提示）属性，因为拥有标签、占位符和工具提示似乎太过分了。另外，某些屏幕 readers 不正确地 在阅读时将工具提示包含在标签的名称中，因此如果您有工具提示。（工具提示是在确定元素的可访问名称时检查的 last 属性。请参阅“Accessible Name and Description Computation”中的步骤 2I）

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

Screenreader shall read aria-label and ignore label with for attribute

html

forms

screen-readers

wai-aria