label 元素是否应该同时具有 for 属性和嵌套 input 元素？

Question

我知道我们可以使用

显式标签：

<label for="myinput">My Text</label>
<input type="text" id="myinput">

或者

隐式标签：

<label>My Text
   <input type="text">
</label>

两者同时使用怎么样：

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>

为了完全覆盖 100% 的辅助设备，我们鼓励您验证嵌套和 ID。

推荐的方式是什么？

Answer 1

简答

使用其中一个而不是同时使用。

两者都使用是矫枉过正的并且会增加代码的复杂性。

使用任一选项均符合 WCAG 标准。

经过一番挖掘后，我发现了这个有趣的测试。

简而言之，屏幕阅读器在这两个版本中都表现良好，但Dragon Naturallyspoken 在包装标签方面仍然表现不佳。

现在我从未见过任何说使用两者实际上是可访问性问题的内容，但是如果您添加，for=""无论如何您都会失去使用包装标签的主要好处。

旁注- 有趣的是，我们在今年早些时候更改了内部指南，以使用包装输入，因为对于我们选择的浏览器/屏幕阅读器支持组合来说，屏幕阅读器支持全面良好（在放弃 IE8 支持之后，如果您需要支持 IE8，那么您需要仍然使用for=""且未包装的输入）。

我现在将推翻这一决定for=""，并在我们调查 Dragon 问题时回到旧的相关标签。

Dragon Naturally Talking 被广泛用作辅助技术 (AT)，尽管它不是正式的 AT。

我建议人们在无障碍方面，我必须比白人更白，比纯粹更纯洁（实践我所宣讲的）。

实际上，如果您想使用包装标签，因为它们更容易，那么就使用它们，带有屏幕阅读器的现代浏览器（IE9 及更高版本）支持 100%。

如果你想使用for=""静止的话，那有最好的支持。这将是我的官方建议，但我也相信技术确实需要继续前进，问题应该由 Dragon 自然地讲，他们“不是辅助技术”的借口是无效的，因为它们仍然受到平等法案的保护2010、ADA 等（在此处插入您所在国家/地区特定的残疾平等法律）

使用两者都太过分了，无论如何都会消除包装标签的大部分好处，而且我不认为同时使用两者有什么意义（除了这样一个事实：如果 Dragon 解决了这个问题，将来您可以删除for=""包装标签上的））。

我看不出他们为什么取消使用两者的要求的理由（因为我仍然没有看到证据表明使用两者会导致问题，正如我之前所说的），但至少这符合我的建议。