时间戳

首页 > 解决方案 > 为什么 HTML 元素（input、textarea 和 select）应该有关联的标签？

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

问题描述

谁能解释一下为什么 ( 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 可以正常工作，那么我为什么要添加它呢？

标签： htmllabelwebstorm

解决方案

相关标签用于辅助功能。因此，例如，当您在网站上运行 lightouse Chrome 检查时，它会在其报告的“可访问性”部分指出缺少的标签。原因：

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

因此，当您的网站可能被无法正确阅读或查看内容并需要屏幕阅读器的残障人士访问时，拥有它们是一件好事。

推荐阅读