aria-describedby 是为已有可访问名称的元素附加补充说明的属性，用于表单验证提示等场景；必须引用真实id，内容可隐藏但不可用display:none，且始终最后朗读。
aria-describedby 是什么，什么时候该用
它不是用来替代 label 的，而是给已有可访问名称的元素（比如带 label 的 input、或本身有 aria-label 的按钮）附加额外说明文字。常见于表单验证提示、复杂控件的操作指引、图标按钮的语义补充。
典型误用：给没名字的 input 单独加 aria-describedby —— 屏幕阅读器会读出描述，但不读控件本身用途，用户根本不知道这是个啥输入框。
怎么写才能被屏幕阅读器正确读出
关键就两点：ID 匹配 + 内容可见性无关
-
aria-describedby的值必须是页面中一个或多个真实存在的元素 ID，用空格分隔，例如：aria-describedby="hint1 error2" - 被引用的元素（如
<div id="hint1">最多10个字符</div>）不需要显示在视觉上，可以hidden或用 CSS 隐藏（但不能用display: none或visibility: hidden，否则部分读屏会跳过） - 多个 ID 按顺序拼接朗读，中间用空格或停顿分隔，所以 ID 的 DOM 顺序和语义顺序要一致
和 aria-labelledby、aria-label 的优先级关系
三者共存时，朗读顺序是：aria-labelledby → aria-label → 元素自身文本内容 → aria-describedby
也就是说，aria-describedby 总是最后读，适合放“补充信息”，而不是核心名称。比如：
<input type="text" aria-label="搜索关键词" aria-describedby="search-hint search-format"><span id="search-hint">支持模糊匹配</span> <span id="search-format">不区分大小写</span>
屏幕阅读器会读作：“搜索关键词，支持模糊匹配，不区分大小写”。
容易被忽略的兼容性与维护风险
Chrome + NVDA 和 Safari + VoiceOver 表现基本一致，但旧版 JAWS 对多 ID 支持不稳定，建议控制在 2 个以内；更麻烦的是维护成本：
- ID 必须全局唯一，动态生成组件时容易重复（比如 Vue/React 中循环渲染多个相同结构的表单项）
- 如果被引用的元素被移除或 ID 改名，
aria-describedby就失效，且不会报错，测试时很难发现 - 不要把长段落塞进
aria-describedby—— 读屏会全读出来，打断用户操作流；超过 2 句话，考虑用aria-details（较新标准，支持有限）或弹出式帮助
最稳妥的做法：描述内容尽量简短，ID 用组件级唯一前缀（如 user-form-hint-123），并在自动化测试里加 ID 存在性断言。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
