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

Question

任何人都可以阐明为什么（

input

、

textarea

和

select

）应该有关联的标签吗？

我找到了一个 stackoverflow 线程（我应该将输入元素放在标签元素中吗？），它解释了关联

<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 检查时，它会指出其报告的“可访问性”部分中缺少的标签。理由：

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

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

Answer 2

如果您想隐藏此警告，只需将具有某些值（甚至可以为空）的

aria-label

属性 添加到交互元素（例如

<input>

、

<textarea>

、

<select>

等）在 JetBrains 的 IDE 中。