标签与输入框的关联必须在语义上建立
别名: label for · accessible name · aria-labelledby · 字段无障碍名称
概念解释
看见标签在槽的旁边，并不等于辅助技术知道它们是一对。程序化标签关联（programmatic label association）要求在无障碍树里把名称绑到控件上：用 label 的 for 指向控件 id，或用 aria-labelledby 指向名称节点。读屏器、语音控制和自动填充都读这棵树，不读你的排版。它解决的是「名称是否属于这个槽」，不是标签该顶置还是左置。
机制
视觉关联靠邻近和对齐，程序关联靠显式引用。缺了引用，读屏器进入槽时只能报「编辑框」，用户不知道要填什么，只能前后摸索。点标签本应把焦点移进槽——这是 label 元素的默认行为，也扩大了命中区；用普通 div 做的「看起来像标签」的字没有这层行为，视力完好的人点名称也会落空。占位符、图标、表头单元格都不是可靠的可访问名称来源。多个槽共用一段可见文字（「姓名」下面两个框）时，若只把文字绑到其中一个，另一个在树里就是匿名的。关联错位——for 指到了隔壁字段——比没有关联更危险，因为播报是错的，用户会按错误名称填。
怎么研究
用无障碍树检查器和读屏器走查：每个输入是否有可访问名称、名称是否与可见标签一致、点可见标签是否聚焦对应槽。自变量：关联方式（for / 包裹 / aria-labelledby / 只有占位符）、可见标签是否被 display:none 或切到屏外。因变量：名称暴露率、点标签命中率、读屏器用户完成表单的时间与错误。自动化规则能抓到「无名称」，抓不到「名称指错对象」；后者要用读屏器对照可见文字。实验室里视力完好的被试完全感觉不到这种失败。
边界
画布、自定义下拉、内容可编辑区域往往不在原生 label 模型里，必须另建可访问名称，不能假设「旁边有字」就够。隐藏可见标签、只留占位符的做法在树里也许能塞进名称，但名称会在输入后从视觉上消失，和程序关联不是同一件事。自动翻译若只改可见节点、不改 aria-label，会出现中英两套名称。验证码、文件选择等浏览器控件的可访问名称有时由用户代理合成，作者侧的关联会被覆盖或并置，需要在目标浏览器里实听。
怎么落地
- 每个输入都用
label for或等价的aria-labelledby绑到可见名称，不要用无引用的div冒充标签。 - 保证点击可见名称会聚焦对应槽；点了没反应就说明关联没建成。
- 检查无障碍树：名称字符串必须与可见文字一致，且不能串到隔壁字段。
- 验证：关掉屏幕，只用读屏器填完整张表。每进入一格，播报的名称必须能让人决定填什么；再睁眼点每个标签，焦点必须落到它说明的那个槽。