输入框错误提示，如何通过aria-describedby实现详细描述？

本文共计847个文字，预计阅读时间需要4分钟。

`aria-describedby` 的作用不是显示错误提示，而是将输入框与 已存在的描述性文本元素 关联起来——即错误提示必须单独使用。

错误提示必须单独使用，例如通过 `aria-errormessage` 和 `aria-invalid` 属性来实现。

为什么直接在 input 上写 aria-describedby="error-id" 不会触发错误播报？

因为 aria-describedby 本身不带语义状态，它只负责“读出那段文字”，不管内容是提示、格式说明还是错误。屏幕阅读器不会因此改变语气、中断流程或标记为错误；它只是平铺直叙地朗读。

• 错误需要明确的状态信号：aria-invalid="true" 是触发错误播报的关键开关
• 仅靠 aria-describedby 引用错误文本，相当于把错误消息当成普通提示——用户听不出这是要立刻处理的问题
• 部分旧版 NVDA 或 JAWS 在未设 aria-invalid 时，甚至会跳过该描述（尤其当焦点刚进入输入框时）

aria-describedby 和 aria-errormessage 必须配合使用的场景

表单验证失败后动态插入错误信息，且该信息不在 label 内、也不在输入框内部时：

• 错误容器需有唯一 id（如 email-error），不能复用提示 ID
• 输入框同时设置：aria-invalid="true" + aria-errormessage="email-error"（注意不是 aria-describedby）
• aria-describedby 仍可保留，用于引用格式提示（如 email-hint），形成“提示 + 错误”双信息流
• 示例：

  <input type="email" id="email" aria-invalid="true" aria-errormessage="email-error" aria-describedby="email-hint"> <div id="email-hint">请输入公司邮箱地址</div> <div id="email-error">域名格式不正确，请使用 @example.com</div>

容易忽略的 DOM 更新时机问题

JavaScript 动态渲染错误信息后，如果没等元素挂载完成就设置 aria-errormessage，会导致屏幕阅读器找不到目标节点：

立即学习“前端免费学习笔记（深入）”；

• 不要在 innerHTML = "...error..." 后立刻赋值属性；应确保元素已存在于 DOM 中
• 推荐用 document.getElementById("email-error") 检查是否存在，再设置 aria-errormessage
• 避免把错误文本塞进同一个 div 里反复修改 innerHTML —— 若该 div 曾被隐藏（display: none），部分屏幕阅读器可能缓存旧状态
• 更稳妥的做法：预先渲染空的 <div id="email-error" aria-live="polite"></div>，只更新其文本内容

真正决定错误是否被“当作错误播报”的，是 aria-invalid 和 aria-errormessage 这对组合；aria-describedby 只负责补充上下文，别让它承担本不属于它的责任。