请考虑以下标记。
<label for="i1" class="inforLabel">This is a label</label>
<input id="i1" type="text" class="inforTextbox" aria-label="Title, not label" />
对我来说,这个标记是在我的自定义工具提示控件之后生成的。我在IE上看到JAWS的问题是它只读取&#34;标题,而不是标签&#34;但是对于其他屏幕阅读器,例如标签和文本框aria-label
上的语音被读取。我认为它应该同时阅读。
这是设置还是错误?或者还有别人可以推荐的东西吗?
答案 0 :(得分:11)
对于DOM中已有描述性标签元素的元素,最好使用aria-labelledby
属性,而不是aria-label
。
https://www.w3.org/TR/wai-aria/#aria-labelledby
来自文档:
aria-labelledby的目的与aria-label的目的相同。它为用户提供了可识别的对象名称。
如果标签文字在屏幕上可见,作者应该使用aria-labelledby,并且不应该使用aria-label。仅当界面不能在屏幕上显示可见标签时才使用aria-label。
当您不遵循标准建议时,单个屏幕阅读器和浏览器组合可能会产生不一致的结果,因为WAI-ARIA规范可以解释。
将多个标签与可访问元素相关联通常不是一个好主意。标签应该简洁。如果您想添加额外的说明,您可能还想使用aria-describedby
。
https://www.w3.org/TR/wai-aria/#aria-describedby
在这两种情况下,您的标签上都需要id
。
<label id="label1" for="input1" class="inforLabel">This is a label</label>
<input id="input1" type="text" class="inforTextbox" aria-labelledby="label1" />
或者,如果您需要多个元素,可以尝试将它们放在div中,其中一个元素在屏幕外。
<div id="accessible-label1">
<label for="input1" class="inforLabel">This is a label</label>
<span class="offscreen">Supplementary text</span>
</div>
<input id="input1" type="text" class="inforTextbox" aria-labelledby="accessible-label1" />
使用适当的CSS将屏幕外类元素放在屏幕外,这应该将accessible-label1
子元素的文本内容组合起来用作aria-label。再次考虑使用aria-describedby
。