问题 咏叹调标签和标签都没有读过


请考虑以下标记。

<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 被读了。我认为它应该同时阅读。

这是设置还是错误?或者还有别人可以推荐的东西吗?


2020
2018-04-02 13:45


起源



答案:


对于DOM中已有描述性标签元素的元素,最好使用 aria-labelledby 属性,而不是 aria-label

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

从文档:

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

如果标签文本在屏幕上可见,作者应该使用aria-labelledby,并且不应该使用aria-label。仅当界面不可能在屏幕上显示可见标签时才使用aria-label。

当您不遵循标准建议时,单独的屏幕阅读器和浏览器组合可能会产生不一致的结果,因为WAI-ARIA规范可以解释。

将多个标签与可访问元素相关联通常不是一个好主意。标签应简明扼要。如果您想添加额外的描述,您可能还想使用 aria-describedby

http://www.w3.org/TR/wai-aria/states_and_properties#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


11
2017-07-11 20:07



加上这个;原始问题的预期结果是: aria-label 应优先考虑 <label>。基于 WAI ARIA规范部分文本替代计算。在@Nick的回答中, aria-labelledby 是预期用法tho,它在Text Alternative Computation场景中具有最高优先级 - Michel Hébert


答案:


对于DOM中已有描述性标签元素的元素,最好使用 aria-labelledby 属性,而不是 aria-label

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

从文档:

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

如果标签文本在屏幕上可见,作者应该使用aria-labelledby,并且不应该使用aria-label。仅当界面不可能在屏幕上显示可见标签时才使用aria-label。

当您不遵循标准建议时,单独的屏幕阅读器和浏览器组合可能会产生不一致的结果,因为WAI-ARIA规范可以解释。

将多个标签与可访问元素相关联通常不是一个好主意。标签应简明扼要。如果您想添加额外的描述,您可能还想使用 aria-describedby

http://www.w3.org/TR/wai-aria/states_and_properties#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


11
2017-07-11 20:07



加上这个;原始问题的预期结果是: aria-label 应优先考虑 <label>。基于 WAI ARIA规范部分文本替代计算。在@Nick的回答中, aria-labelledby 是预期用法tho,它在Text Alternative Computation场景中具有最高优先级 - Michel Hébert