aria-labelledby仅在目标元素真实存在、可见且可访问时生效；id拼错、被隐藏（如display:none）、动态失效或跨shadow dom均导致屏幕阅读器静默跳过，不报错也不读。
aria-labelledby 不是“写上 ID 就能用”，它只在目标元素真实存在、可见、可访问时才生效。写错 ID、目标被隐藏、或动态渲染后 ID 失效，屏幕阅读器就彻底跳过——不报错，也不读。
目标元素必须真实存在且已挂载
ID 拼错、大小写不一致、或 JS 动态生成时重复（比如多个 id="label-1"），都会导致引用断裂。浏览器不会提示，但 Chrome DevTools 的 Accessibility 面板里，“Name Computation” 会显示为空或 “idref not found”。
- 用
document.getElementById("your-id")在控制台手动查，确认返回的是期望的 DOM 节点 - SSR 渲染后客户端 hydration 又删了该元素？ID 生命周期断了，引用瞬间失效
- Vue/React 中避免用计算属性拼接 ID 字符串，响应式更新可能漏掉，ID 值滞后于 DOM 状态
目标元素必须可见且可访问
aria-labelledby 引用的元素一旦被 display: none、visibility: hidden 或 aria-hidden="true" 隐藏，屏幕阅读器就完全忽略——不是读错，是跳过整个控件。
- 要用
sr-only类，必须配真正可访问的样式：position: absolute; clip: rect(1px, 1px, 1px, 1px);，不能只靠opacity: 0或height: 0 - 表格中用
<th id="col-name">姓名</th>为某列所有<input>提供标签，没问题；但如果 JS 折叠了整行，<th> 被 <code>display: none，那所有关联的input都失联 - Shadow DOM 内部的 ID 默认不可见，除非组件显式暴露或使用
delegatesFocus等穿透机制 - 写了
aria-labelledby="x"又顺手加了aria-label="y"？Lighthouse 会报错，且aria-label形同虚设 - 已有
<label for="x"></label>，再加aria-labelledby="x"属于冗余；若文本不一致，还可能触发语义冲突 - 想组合图标 + 标题 + 辅助说明？可以：
aria-labelledby="icon-title helper-text"，但别把辅助说明放最前，否则读出来是“请勿关闭窗口 —— 关闭按钮”，逻辑混乱 -
<progress aria-labelledby="upload-label"></progress>+<p id="upload-label">文件上传进度</p>是基础 - 值从 30 变到 75 时，要立刻执行：
progressEl.setAttribute('aria-valuetext', '已完成 75%') - 禁用
title替代：它不触发键盘朗读，移动端基本无效，某些 NVDA 版本还会重复播报 - 图表容器加
role="img"后，用aria-labelledby指向下方<p id="chart-desc"></p>是标准做法；别用aria-describedby，它默认不播报主名称
多 ID 引用和优先级陷阱
多个 ID 必须用空格分隔，顺序即读出顺序：aria-labelledby="title hint desc"。逗号、换行、制表符都不行。更关键的是，它和 aria-label 不能共存——后者会被直接忽略。
progress、图表等特殊元素怎么用
<progress></progress> 单独存在时对屏幕阅读器完全不可读，必须配 aria-labelledby；而仅靠它还不够，数值变化需靠 aria-valuetext 手动同步更新。
最容易被忽略的不是“要不要加”，而是“加的时候目标还在不在”。ID 是活的，不是写死就一劳永逸——尤其在 SSR + CSR 混合、条件渲染、折叠展开等场景里，引用关系随时可能断开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
