我有一个带有两部分标签的输入字段,由aria-labelledby
指定:
<p id="label2">Part 2</p>
<label id="label1">Part 1</label>
<input type="text" aria-labelledby="label1 label2">
当我在Chrome中运行WAVE扩展程序(版本1.0.9)时,<label>
被标记为孤立,但input
本身被视为已正确标记/描述。
我在<label>
使用for
是错误的,因为没有aria-labelledby
属性,或者该工具无法将label
中的ID连接到{ {1}}?
答案 0 :(得分:2)
虽然您的代码没有一致性问题,但控件具有可见标签,其accessible name是2个可见标签的串联,可通过正确使用来实现可访问性/可用性改进label
元素。如果您使用label
将input
元素与for/id
相关联,则label
变为可点击状态,并在点击input
时将焦点移至label
,从而增加可点击区域以聚焦控件。副作用是WAVE不再抱怨。
<p id="label2a">Part 2</p>
<label id="label1a" for="t1">Part 1</label>
<input type="text" aria-labelledby="label1a label2a" id="t1">
答案 1 :(得分:2)
与控件无关的label
元素。虽然您的输入确实使用ARIA来引用标签元素,但label
的语义未被使用 - 它也可能是span
。孤立标签通常表示可访问性问题,因此表示WAVE警报。