我知道我们可以使用
显式标签：
<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>
You can read here the following recommendation
要完全覆盖 100% 的辅助设备，我们鼓励您 验证嵌套和 id。
推荐的方式是什么？
【问题讨论】：
标签： html accessibility jsx
两者都不能使用。
for=""
同时使用这两种方法太过分了，而且会增加代码的复杂性。
使用任一选项均符合 WCAG。
经过一番挖掘，我遇到了this interesting test.
简而言之，屏幕阅读器在这两个版本中的表现都很好，但Dragon Naturally speak仍然不能很好地使用包装标签。
现在我从未见过任何说同时使用两者实际上是可访问性问题的东西，但是如果您添加 for=""，则无论如何您都会失去使用包装标签的主要好处。
旁注 - 有趣的是，我们在今年早些时候更改了内部指南以使用包装输入，因为屏幕阅读器对我们选择的浏览器/屏幕阅读器支持组合的全面支持（在放弃 IE8 支持之后） ，如果您需要支持 IE8，那么您仍然需要使用 for="" 而不是包装输入）。
我现在要推翻这个决定，在我们调查 Dragon 问题时，我会使用旧的 for="" 相关标签。
Dragon Naturally speak 被广泛用作辅助技术 (AT)，尽管它不是正式的辅助技术。
我就可访问性向人们提出建议，我必须比白人更白，比纯洁更纯洁（实践我所宣扬的）。
实际上，如果您想使用包装标签，因为它们更容易，然后使用它们，100% 的现代浏览器（IE9 及更高版本）都支持屏幕阅读器。
如果您仍然想使用for=""，那么它有最好的支持。这将是我的官方建议，但我也认为技术确实需要继续发展，问题应该由 Dragon Naturally speak 解决，他们“不是辅助技术”的借口是无效的，因为它们仍然在平等法案的保护范围内2010 年，ADA 等（在此处插入您所在国家/地区的特定残疾平等法）
同时使用这两者只是矫枉过正，并且无论如何都消除了包装标签的大部分好处，我看不出同时使用这两种标签的意义（除了将来您可以删除包装标签上的 for="" 的事实之外）如果 Dragon 解决了这个问题，请标记）。
documentation for this test you linked 写着大写[已弃用] 并链接到此documentation for a replacement test.
我看不出他们为什么取消使用两者的要求的理由（因为我仍然没有看到证据表明使用这两种方法会导致问题，正如我之前所说的那样），但至少这符合我的建议。
【讨论】：
显式标签或隐式标签就足够了 (W3C spec)。 According to MDN，使用for 属性嵌套表单元素和 是可以的，只要嵌套元素具有与for 匹配的id，但这是不必要的。我在您的帖子中引用的意思是您应该有两个单独的测试用例用于显式和隐式使用，而不是一个同时具有嵌套表单元素和 for 属性的案例。
至于什么是“推荐”，我想说这取决于您的具体情况。就我个人而言，我总是尝试将我的表单元素嵌套在 <label> 中，因为我完全不必为 for 和 id 操心，而且从代码中可以清楚地看出两者之间的关联。每当<label> 不能成为表单元素的父元素时，我就会使用for。
【讨论】：