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类上进行Google搜索。它来自引导程序，但是许多其他框架也定义了它。您可以从此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），然后在{{1} }。

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>（工具提示）属性，因为它似乎过于夸张，因为它带有标签，占位符和工具提示。另外，某些屏幕阅读器在读取时会错误地在标签名称中包含工具提示，因此，如果您有工具提示，有时您仍会在标签中听到“ /”。（工具提示是确定元素的可访问名称时检查的 last 属性。请参见“ Accessible Name and Description Computation”中的步骤2I）

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

1 个答案: