表单标签关联验证器 - 检查 label 与 input 的配对

无障碍访问（Accessibility）：屏幕阅读器通过 label 来识别表单控件的用途。没有正确关联的 label，视障用户无法理解输入框的目的。

点击区域扩大：关联后点击 label 文本即可聚焦到对应 input，提升移动端和精细操作困难用户的体验。

SEO 友好：搜索引擎能更好地理解表单结构，提升页面的语义化评分。

WCAG 合规：Web内容无障碍指南（WCAG 2.1）成功标准 1.3.1 和 3.3.2 明确要求表单控件必须有描述性标签。

显式关联：使用 label 的 for 属性指向 input 的 id，两者通过ID关联。这是最推荐的方式。

<label for="email">邮箱地址</label>
<input type="email" id="email">

隐式关联：将 input 直接嵌套在 label 标签内部，无需 for 和 id。

<label>邮箱地址
  <input type="email">
</label>

显式关联更灵活（label和input可以分开放置），兼容性更好，推荐优先使用。

aria-label 和 aria-labelledby 可以为屏幕阅读器提供标签信息，但不能完全替代可见的 <label>。

原因：

• aria-label 不可见，明眼用户看不到标签文本。
• 点击 aria-label 不会自动聚焦到输入框。
• 某些旧版辅助技术支持有限。

最佳实践：始终使用可见的 <label>，aria-label 仅作为补充手段。

一个 <label> 的 for 属性只能指向一个元素的 id。多个 input 共用一个 label 是不规范的。

对于 radio 按钮组或 checkbox 组，推荐使用 <fieldset> + <legend> 作为组标签，然后每个选项各自拥有独立的 <label>。

<fieldset>
  <legend>性别</legend>
  <label><input type="radio" name="gender" value="male"> 男</label>
  <label><input type="radio" name="gender" value="female"> 女</label>
</fieldset>

以下类型的 <input> 通常不需要单独的 label：

• type="hidden" — 隐藏字段，用户不可见
• type="submit" — 提交按钮，value属性即为显示文本
• type="reset" — 重置按钮
• type="button" — 通用按钮
• type="image" — 图片提交按钮，alt属性提供标签

需要 label 的类型包括：text, password, email, number, tel, url, search, date, time, color, range, checkbox, radio, file 等，以及 <select> 和 <textarea>。

除了使用本工具手动粘贴HTML检测外，你还可以：

• 使用浏览器开发者工具的 Lighthouse 审计功能，检查无障碍得分。
• 安装 axe DevTools 或 WAVE 浏览器扩展进行自动检测。
• 在构建流程中集成 eslint-plugin-jsx-a11y（React）或类似工具。
• 使用本工具的检测逻辑编写自动化测试脚本。