aria-describedby 必须引用真实存在的 ID 元素，目标需已挂载、有唯一 ID、未被 display: none 或 aria-hidden="true" 隐藏；常见失败包括拼写错误、ID 未渲染、重复 ID 或误用 title/placeholder。
aria-describedby 必须引用真实存在的 ID 元素
它不是“自动找旁边的文字”，而是靠 id 精确绑定——目标元素必须已挂载到 DOM、有唯一 id、且不能被 display: none 或 aria-hidden="true" 隐藏。90% 的“没读出来”问题，根源都在这里。
常见失败现象：屏幕阅读器静默、读出错误内容、或根本跳过不读。
- 拼写/大小写不一致：
email-error≠Email-Error - 目标元素还没插入 DOM 就设置了
aria-describedby（比如 React/Vue 中条件渲染未触发、JS 动态插入后未校验） - ID 重复或被多个元素共用（浏览器只取第一个匹配项）
- 用了
title或placeholder当描述文字——它们不会被当作aria-describedby的目标
怎么写 HTML 才能让屏幕阅读器正确朗读
关键就两点：ID 匹配 + 内容可访问。只要满足，视觉是否显示不影响播报。
-
aria-describedby的值必须是空格分隔的 ID 列表，例如：aria-describedby="email-hint email-error" - 被引用的元素推荐用
<p>或<div>，避免用<span>（部分读屏对内联元素支持弱） - 视觉隐藏但保留可访问性，用 CSS 类如
sr-only，而不是display: none或visibility: hidden - 多个 ID 按 DOM 中出现顺序朗读，所以把更关键的提示（如错误）放在前面更合理
示例：
立即学习“前端免费学习笔记（深入）”；
<input type="email" id="email" aria-describedby="email-hint email-error"> <p id="email-hint" class="sr-only">请使用公司邮箱地址</p> <p id="email-error" class="sr-only" aria-live="polite">邮箱格式不正确</p>
为什么不能用 aria-describedby 替代 label
因为它的语义定位就是“补充说明”，不是“控件身份”。没有 label 或 aria-label 的 <input>，即使绑了 aria-describedby，读屏仍只会读“编辑框”，用户完全不知道这是填什么的。
-
label定义控件“是什么”（如“邮箱地址”），aria-describedby补充“怎么填”或“要注意什么”（如“如：name@company.com”） - 把提示塞进
<label>里再加aria-describedby，会导致重复朗读 - 表单控件必须有自己的
id，<label for="xxx">指向它，而不是反过来让控件指向label的id
动态更新时最容易忽略的三个点
很多“写了却没读出来”的问题，不是语法错，而是生命周期没对齐。
- JS 插入错误提示后，只改
textContent不够——要先确认document.getElementById("email-error")存在，再设aria-describedby - 错误提示元素必须带
aria-live="polite"（或assertive），否则内容更新不会主动播报 - ID 命名建议带字段标识和上下文，如
error-user-0-email，避免随机生成（如error-uuid4()）导致下次找不到
服务端渲染或初始 HTML 中就该预置空容器：<p id="email-error" class="sr-only" aria-live="polite"></p>，客户端只操作内容，不删重建元素。
