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

【问题标题】：WAVE extension not detecting label + aria-labelledbyWAVE 扩展未检测到标签 + aria-labelledby
【发布时间】：2018-02-09 23:11:39
【问题描述】：

我有一个带有两部分标签的输入字段，由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 中的ID 连接到label？

【问题讨论】：

标签： html accessibility wai-aria wcag2.0

【解决方案1】：

虽然您的代码不存在一致性问题，但该控件有一个可见标签，并且它的 accessible name 是两个可见标签的串联，但可以通过正确使用label 元素。如果您使用for/id 将label 元素与input 相关联，则label 变为可点击并且当点击label 时焦点将移动到input，从而增加了可点击区域以聚焦控件。一个副作用是 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

【讨论】：

【解决方案2】：

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

【讨论】：