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

时间:2018-02-09 23:11:40

标签: html5 accessibility wai-aria wcag2.0

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

2 个答案:

答案 0 :(得分:2)

虽然您的代码没有一致性问题,但控件具有可见标签,其accessible name是2个可见标签的串联,可通过正确使用来实现可访问性/可用性改进label元素。如果您使用labelinput元素与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

答案 1 :(得分:2)

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