可访问性：标签除了输入之外还可以有子级吗？答案

【问题标题】：Accessibility: Can a label have children besides the input?可访问性：标签除了输入之外还可以有子级吗？
【发布时间】：2017-11-16 17:17:50
【问题描述】：

辅助功能问题：<label>...</label> 除了<input ... /> 之外还能生孩子吗？我们在一个项目中使用 Material UI，他们的 <Switch /> 组件是这样构建的：

<label>
  <div>
    <span>
      <span>
        <input />
      </span>
    </span>
  </div>
</label>

这会触发 HTML_Codesniffer 中的可访问性错误。

不确定它是否只是不习惯这种结构并期望label 是input 的直接父级，或者它是否是一个实际错误。

【问题讨论】：

不：validator.w3.org - 非常明显的错误i.imgur.com/XyDTf9A.png
在我发布之前请阅读。发完之后再读一遍。 “允许的内容”部分没有提及不可标记内容的问题。 “短语内容，但没有后代标签元素。除了带标签的控件之外，不允许有任何可标记的元素。”
@AlonEitan 并且该文档明确表示接受短语内容。

【解决方案1】：

标签除了输入之外还能有子标签吗？

是的，幸运的是（否则无法格式化文本标签）。例如，以下是允许的

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

According to the documentation 可以包含任何短语内容：

短语内容，但没有后代可标记元素，除非它是元素的标记控件，并且没有后代标签元素

在您的示例中，您不能有 div，因为它是流内容而不是短语内容，尽管浏览器和辅助技术支持它。

请注意，HTML_Codesniffer 中的可访问性错误可能与该问题无关，而是与此工具无法正确链接 label 与 input 的事实有关。

【讨论】：

【解决方案2】：

内联元素实际上并不是为包含元素而设计的，也许你应该使用“div”而不是“span”

【讨论】：