accessibility - 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已读。我认为它应该阅读两者。

这是设置还是bug？或者有没有其他人可以推荐的？

Answer 1

对于已经在 DOM 中具有描述性标签元素的元素，最好使用 aria-labelledby属性，而不是 aria-label .
https://www.w3.org/TR/wai-aria/#aria-labelledby
从文档:

The purpose of aria-labelledby is the same as that of aria-label. It provides the user with a recognizable name of the object.

If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. Use aria-label only if the interface is such that it is not possible to have a visible label on the screen.

当您不遵循标准建议时，单个屏幕阅读器和浏览器组合可能会产生不一致的结果，因为 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-describedby .