辅助功能：除了输入外，标签是否还有孩子？

Question

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

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

在HTML_Codesniffer中触发了辅助功能错误。

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

Answer 1

  

除了输入之外，标签是否还有孩子？

是的，幸运的是（或者无法格式化文本标签）。例如，允许以下内容

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

According to the documentation它可以包含任何措辞内容：

  

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

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

请注意，HTML_Codesniffer中的辅助功能错误可能未与该问题相关联，但此工具未正确链接label与input。

Answer 2

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