为什么 HTML 元素（input、textarea 和 select）应该有关联的标签？

Question

谁能解释一下为什么 ( input、textarea和select) 应该有一个关联的标签？

我找到了一个 stackoverflow 线程（Should I put input elements inside a label element?<input> ），它解释了关联和的所有方式<label>，但我没有找到任何关于为什么必须关联标签的明确解释。

例子

WebStorm (IDE) 会针对此代码中的输入生成“缺少关联标签”警告：

<div>
  <input type="text" id="search" name="search">
  <button id="logout" name="logout">Logout</button>
</div>

应用自动更正会为输入添加标签：

<div>
  <label>
    <input type="text" id="search" name="search">
  </label>
  <button id="logout" name="logout">Logout</button>
</div>

HTML 在没有标签的情况下工作正常，那么我为什么要添加它呢？

Answer 1

关联标签旨在实现可访问性。因此，例如，当您在网站上运行 lightouse Chrome 检查时，它会指出其报告的“可访问性”部分中缺少的标签。原因：

“标签确保表单控件通过辅助技术（例如屏幕阅读器）正确宣布”。

因此，当您的网站可供无法正确阅读或查看内容并需要屏幕阅读器的残疾人访问时，拥有它们是很好的选择。