表单 aria-describedby 关联错误提示的可访问设计

表单的错误提示不能只靠红色边框或旁边的一行文字。更稳妥的做法是给输入控件设置稳定的 id，让 aria-describedby 引用同一份 DOM 中的帮助文本和错误文本；校验失败时再同步 aria-invalid="true"，并确保错误内容对所有用户可见。这样，视觉用户能看到原因，辅助技术也能取得与当前字段对应的说明。

先把字段的可读关系拆清楚

一个邮箱字段通常至少有三种文字：字段名称、输入规则和失败原因。字段名称应由原生 label 与 for 提供；规则和失败原因才适合放入描述关系。aria-describedby 可以引用一个或多个元素，值之间用空格分隔，引用目标必须拥有对应的 id。

用 aria-describedby 连接帮助文本与错误文本

下面的结构把帮助文本和错误文本都纳入描述列表。初始状态只显示帮助说明；错误出现后，脚本替换描述引用，并把错误节点从视觉上显示出来。示例中的注释说明了切换点，便于和现有表单状态管理对照。

工作邮箱
请输入公司域名邮箱。

这里的关键不是把属性写上去就结束，而是保持三件事同步：错误文本有明确内容、节点状态可见、输入控件反映当前是否无效。如果一个字段对应多个错误，优先合并成短而明确的纯文本；不要让描述区域塞入需要用户逐段导航的复杂表格或交互组件。

动态校验时要同步状态与可见提示

校验失败时，aria-invalid="true" 表示当前值需要修正；错误节点则负责告诉用户原因和下一步。若项目采用 aria-errormessage，它应在无效状态下指向可见错误消息。对于普通短句，aria-describedby 足够；说明内容包含复杂结构时，应评估 aria-details，不要把语义压扁成一大段字符串。

常见问题

aria-describedby 能替代 label 吗？

不能。它是补充描述关系，字段名称仍应由可关联的 label 提供。

错误提示一定要单独使用 aria-errormessage 吗？

不一定。短文本错误可以纳入 aria-describedby；采用 aria-errormessage 时，要同步无效状态并保证引用的错误信息可见。

为什么写了 aria-describedby 仍然读不到错误？

优先检查 ID 是否拼写一致、目标节点是否存在、文本是否为空，以及校验失败后是否真的更新了 DOM。重复 ID 和组件卸载也会让这条关系失效。

最终检查时，把每个字段当成一组关系来排查：名称由谁提供、说明引用了谁、错误何时出现、修正后是否清除。只要属性、文本和可见状态始终指向同一个字段，表单错误提示就更容易被看见、听见和修正。