aria-describedby必须用真实ID精确引用已存在且未隐藏的DOM元素，ID拼写需大小写一致，不可用display:none或visibility:hidden隐藏目标；多ID须用空格分隔，动态更新需配合aria-live。
aria-describedby 必须用真实 ID 引用已有元素
它不是自动找文字，也不是写死提示内容，而是靠 id 精确绑定——目标元素必须已存在于 DOM 中、id 拼写完全一致（大小写敏感）、且不能被 display: none 或 visibility: hidden 隐藏。常见失效原因：JS 动态插入错误提示后没等元素挂载就设置 aria-describedby，或组件销毁时没清理旧 id 导致重复。
推荐做法：
- 初始 HTML 就预留空容器：<p id="email-error" class="sr-only" aria-live="polite"></p>
- JS 校验失败时只更新 textContent，不删重建元素
- 设置前用 document.getElementById("email-error") 确认存在再调 input.setAttribute('aria-describedby', 'email-error')
多个提示怎么用空格分隔 ID
原生支持多 ID，但必须用单个空格分隔，逗号、分号、换行都会让后续 ID 失效。浏览器按 DOM 中元素顺序朗读，所以关键提示放前面。
正确写法：aria-describedby="email-hint email-error"
错误写法：aria-describedby="email-hint,email-error"（只读第一个）
注意事项：
- 被引用的元素建议用 <div> 或 <p>，避免用 <span>（部分读屏器对内联元素支持弱）
- ID 命名带字段标识，如 password-strength，列表场景加唯一 key，如 user-0-email-hint
为什么写了却没读出来
90% 是因为可访问性生命周期没对齐：DOM 存在性、CSS 隐藏方式、aria-live 缺失三者缺一不可。
排查要点：
- 错误提示元素是否设置了 role="alert" 或 aria-live="polite"（否则内容更新不会主动播报）
- 是否用了 class="sr-only" 视觉隐藏（推荐：position: absolute; width: 1px; height: 1px; margin: -1px;），而不是 display: none
- input 是否已有 label 或 aria-label？没有的话，aria-describedby 只会读提示，不读控件用途，用户根本不知道这是啥
动态更新描述内容要触发重读
仅改 textContent 不够，屏幕阅读器不会自动感知变化。必须配合 aria-live 属性，且类型要匹配场景。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 一般校验提示用 aria-live="polite"（空闲时朗读）
- 提交失败等紧急信息用 aria-live="assertive"（立即打断当前语音，慎用）
- 不要用 aria-hidden 控制显隐——隐藏时内容不可访问，显示时又没触发重读
- 如果提示是条件渲染（如 Vue/React 的 v-if / {error && <div id="...">}），确保元素挂载后再设置 aria-describedby，否则引用为空
复杂点不在语法本身，而在 ID 的生命周期管理——它不像 CSS 类可以随便加减，一旦拼错、重复、或 DOM 未就绪，问题就静默发生，测试时很难发现。
