WAVE扩展未检测到标签+ aria-labelledby

Question

我有一个带有两部分标签的输入字段，由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}}？

Answer 1

虽然您的代码没有一致性问题，但控件具有可见标签，其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">

test case

Answer 2

与控件无关的label元素。虽然您的输入确实使用ARIA来引用标签元素，但label的语义未被使用 - 它也可能是span。孤立标签通常表示可访问性问题，因此表示WAVE警报。