每个输入需要与其可见标签建立程序化关联
别名: label for · aria-labelledby · accessible name · 标签关联
概念解释
屏幕上看见「邮箱」四个字挨着输入框，不等于辅助技术知道这个框叫邮箱。程序化关联指可见标签与控件在无障碍树上是同一组：label for / 包裹 label / aria-labelledby 指向那句可见文字，控件的可访问名称就是那句文字。只用占位符当名称、错误怎么挂上、必填状态怎么同时被看见和听见，是后面三步。视觉上把标签放在左边还是上边，是位置问题，不能代替这层绑定。
机制
辅助技术读的是可访问名称，不是像素邻近。邻近只对视力用户构成「这是它的标签」。没有绑定，名称会变成「编辑框」或被邻近的按钮、图例误领。第二层是可见文字必须就是名称来源：用一段看不见的 aria-label="email" 而屏幕上写「工作邮箱」，阅读器用户和视力用户听到/看到的不是同一个词，核对和对齐都会错。点击标签应聚焦控件，这是绑定的行为后果，也是运动能力较差的人扩大点击区域的方式。自定义控件没有原生 label 钩子时，必须显式提供名称，且名称节点要在树上稳定存在，不能只在 CSS 里画一行字。
怎么研究
用无障碍树或名称计算检查每个输入的可访问名称是否等于可见标签。用阅读器 Tab 走过，听名称。纳入只有标签可点、框很小的移动页。
自变量：绑定方式（for / 包裹 / aria-labelledby / 仅邻近 / 仅隐形 aria-label）、可见文案与隐形名称是否一致。
因变量：名称是否等于可见标签、点击标签是否聚焦、阅读器是否读成「编辑框」、隐形名称与可见文案不一致的次数。
自动化只能抓到「有没有名称」，抓不到「名称是不是那句可见的话」。必须对照屏幕截图和树。不要用占位符当名称通过检查。
边界
搜索框在视觉上只有图标时，可见名称可以是按钮上的「搜索」，仍需程序化接到输入。验证码、画布签名没有常规标签，要有可见的说明文本并 aria-labelledby 指向它。隐藏但可聚焦的蜜罐不应被当成要绑定的真字段。动态改标签文案时，绑定的节点也要改，否则名称停留在旧词。
怎么落地
- 每个可见输入用
label for或aria-labelledby接到屏幕上那句标签，禁止只靠放在旁边。 - 可访问名称取自可见文字，不另写一套隐形英文。
- 点击标签必须聚焦对应控件；自定义控件同样要接到名称节点。
- 验证：打开无障碍树，逐项看 Name 是否等于屏幕标签。点击标签，焦点进入输入。关掉样式后标签与输入的 HTML 关系仍在。用阅读器只听名称，确认没有「编辑框」无名项。