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中已经有描述性label元素的元素，最好使用aria-labelledby属性，而不是aria-label。

https://www.w3.org/TR/wai-aria/#aria-labelledby

从文档中：

-labelledby的用途与aria-labelledby相同。它为用户提供对象的可识别名称。

如果标签文本在屏幕上可见，作者应该使用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的使用。