这是什么
一个正确编码的标签，是在页面底层代码中明确关联到特定表单字段的文字（通常通过一个与字段 id 相匹配的 for 属性），这样当访客把焦点移到该字段的那一刻，屏幕阅读器就会朗读出这个标签——例如「电子邮箱地址，编辑文本」。这比仅仅在字段附近有一段看起来像标签的可见文字，要求更严格、更技术化，后者是我们专注于转化率的通用表单字段标注指南所涉及的角度。
对视力正常的访客来说，一个字段可能看起来标注得完美无缺（文字就在输入框旁边），但代码中该文字与字段之间可能根本没有实际的编码关联——而这正是这项以无障碍为重点的检查所要找的缺口。
为什么重要
屏幕阅读器看不到页面的视觉布局——它读取的是底层代码结构，所以一个只在视觉上靠近字段、但在代码中没有明确关联的标签，可能在屏幕阅读器用户到达那个字段时根本不会被朗读出来。听不到一个字段是干什么用的，他们只能靠猜测，或者完全跳过它，这可能意味着屏幕阅读器用户根本无法完成一个视力正常的访客觉得完全直白的表单。
这是 WCAG（许多组织在法律上必须遵守的标准无障碍指南）中最成熟、被明确点名的要求之一，正是因为表单对于在网络上实际完成一项任务——注册、结账、联系——是如此核心。
如何解决
- 为每个表单字段添加一个
<label>元素，其for属性要与该字段的id属性完全匹配。 - 或者，直接把字段包裹在
<label>标签内部，这样能创建同样明确的关联，而无需匹配 ID。 - 对于设计上就没有可见标签的字段（比如仅有搜索图标的字段），直接在该字段上使用
aria-label="搜索"，这样屏幕阅读器依然会朗读出它的用途。 - 避免仅依赖占位文字作为真实标签的替代品——屏幕阅读器对占位文字的处理并不一致，而且一旦输入了文字，占位文字就会消失。
- 只用键盘和一款免费的屏幕阅读器（NVDA、VoiceOver）在你的表单中逐一切换字段进行测试，确认每个字段都朗读出了清晰的用途。