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

Question

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

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

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

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

Answer 1

\n
除了输入之外，标签还可以有子项吗？
\n

\n\n

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

\n\n

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

根据文档，它可以包含任何短语内容：

\n\n

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

\n\n

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

\n\n

请注意， HTML_Codesniffer 中的可访问性错误可能与该问题无关，而是与该工具未正确链接label到input.

\n