15

请考虑以下标记。

<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被读取。我认为应该两者都读。

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

4

1 回答 1

13

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

在这两种情况下，您都需要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.

于 2014-07-11T20:07:21.153 回答