aria-labelledby必须确保目标元素真实存在、可见且可访问，否则屏幕阅读器静默跳过；ID拼错、被隐藏、动态失效或跨Shadow DOM均导致失效，多ID须空格分隔且不可与aria-label共存。
必须确保目标元素真实存在、可见、可访问，否则屏幕阅读器直接跳过，不报错也不读。
aria-labelledby 指向的 ID 必须真实挂载且未隐藏
写对了属性，不代表它就生效。常见失效场景包括：
-
document.getElementById("my-label")返回null—— ID 拼错、大小写不一致、或元素还没渲染出来（比如 SSR hydration 后被 JS 删除） - 目标元素被
display: none、visibility: hidden或aria-hidden="true"隐藏 —— 屏幕阅读器彻底忽略，不是“读错”，是“不读” - 用了
sr-only类但样式不对，比如只写了opacity: 0或height: 0—— 真正可访问的 sr-only 需要position: absolute; clip: rect(1px, 1px, 1px, 1px); - 目标在 Shadow DOM 内部，且组件没做穿透（如未用
delegatesFocus或exportparts）—— 引用跨不过边界
多 ID 引用和顺序陷阱
多个文本节点组合成标签时，空格分隔是硬性要求，顺序决定播报顺序：
- ✅ 正确：
aria-labelledby="title-hint-desc"（三个 ID 用空格分隔） - ❌ 错误：
aria-labelledby="title-hint,desc"（逗号分隔）、aria-labelledby="title-hint desc "（末尾多余空格可能被截断） - 播报顺序严格按 ID 列表顺序，不是 DOM 中出现顺序 —— 把主标题 ID 放前面，提示文字放后面
- 若其中任一 ID 失效（如
id="hint"元素被删），其余仍有效；但若全失效，整个标签计算为空
为什么不能和 aria-label 一起用
aria-labelledby 的优先级高于 aria-label，后者会被完全忽略：
立即学习“前端免费学习笔记（深入）”；
- 写了
aria-label="邮箱"又加aria-labelledby="email-label"→ 屏幕阅读器只读email-label对应的内容，“邮箱”白写了 - Lighthouse 和 axe 会直接报
aria-label is redundant错误 - 更危险的是：你以为
aria-label是保底，结果aria-labelledby因 ID 失效而静默，整个控件对读屏器“失联” - 验证方式很简单：打开 DevTools 的 Accessibility 面板，看 “Name Computation” 是否显示为预期文本；再用 NVDA + Firefox 实际听一遍
优先用原生 label，aria-labelledby 是补救方案
能用 <label for="x"> 或 <label><input></label>，就别绕路用 aria-labelledby：
- 原生
label自带点击聚焦、键盘支持、浏览器校验联动，语义更稳 -
aria-labelledby只影响无障碍名称计算，不触发聚焦、不改变样式、不支持 CSS 相邻选择器匹配 - 典型该用
aria-labelledby的场景：表格中<th id="col-name">为整列<input>提供标签；图表容器role="img"关联下方说明段落；面包屑当前页指向主标题 - 所有表单控件（
input、select、textarea）必须有label或aria-labelledby，裸奔会导致读屏器只报“编辑文本，空白”
最常被忽略的不是语法，而是 ID 的生命周期管理 —— 它得比 JS 状态更稳定，比 CSS 显示更可靠，比翻译系统更早就位。
