aria-label 和 label 不都读

Question

请考虑以下标记。

<label for="i1" class="inforLabel">This is a label</label>
<input id="i1" type="text" class="inforTextbox" aria-label="Title, not label" />

对我来说，这个标记是在我的自定义工具提示控件之后生成的。我在 IE 上的 JAWS 上看到的问题是它只读取“标题，而不是标签”，但是对于其他屏幕阅读器，例如标签和文本框 aria-label 的语音都被读取。我认为它应该同时阅读。

这是设置还是错误？或者还有其他人可以推荐的吗？

Answer 1

对于已经在 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。