WAVE 扩展未检测到标签 + aria-labelledby
WAVE extension not detecting label + aria-labelledby
我有一个带有两部分标签的输入字段，由 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 本身被视为正确 labeled/described.
我在那里使用 <label> 是不是错了，因为不会有 for 属性，或者该工具只是无法将 aria-labelledby 中的 ID 连接到label?
虽然您的代码没有一致性问题，但该控件有一个可见标签，它的 accessible name 是 2 个可见标签的串联，可以进行 accessibility/usability 改进通过正确使用 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">
未与控件关联的 label 元素。虽然您的输入确实使用 ARIA 来引用标签元素，但未使用 label 的语义 - 它也可能是 span。孤立标签 通常 表示存在可访问性问题，因此会发出 WAVE 警报。
我有一个带有两部分标签的输入字段，由 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 本身被视为正确 labeled/described.
我在那里使用 <label> 是不是错了，因为不会有 for 属性，或者该工具只是无法将 aria-labelledby 中的 ID 连接到label?
虽然您的代码没有一致性问题，但该控件有一个可见标签，它的 accessible name 是 2 个可见标签的串联，可以进行 accessibility/usability 改进通过正确使用 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">
未与控件关联的 label 元素。虽然您的输入确实使用 ARIA 来引用标签元素，但未使用 label 的语义 - 它也可能是 span。孤立标签 通常 表示存在可访问性问题，因此会发出 WAVE 警报。