aria-labelledby必须指向真实存在、可见且可访问的DOM元素，若目标被隐藏（如display:none、aria-hidden="true"）或ID不存在/拼错，则屏幕阅读器彻底跳过；多ID须空格分隔，不可与aria-label混用，优先复用页面已有文本以保障多语言与维护性。
aria-labelledby 必须指向可见且可访问的元素
它不是“随便写个 ID 就能用”的属性。如果 aria-labelledby 引用的元素被 display: none、visibility: hidden 或 aria-hidden="true" 隐藏，屏幕阅读器就完全读不到——不是读错，是彻底跳过。这在动态渲染或 CSS 切换状态时特别容易踩坑。
常见错误现象：
- 用
aria-labelledby="title-id"，但<h2 id="title-id">订单详情</h2>被 JS 临时隐藏了 - 标题放在
<div class="sr-only"> 里，却没配 <code>position: absolute; clip: rect(1px, 1px, 1px, 1px);等真正可访问的 sr-only 样式 - 多个 ID 写成
aria-labelledby="id1, id2"（逗号分隔），正确写法是空格分隔：aria-labelledby="id1 id2" - 搜索框旁有可见
<label id="search-label">查找商品</label>，输入框写aria-labelledby="search-label" - 图表下方有说明文字
<p id="chart-desc">2024 年用户增长趋势</p>，图表容器加role="img" aria-labelledby="chart-desc" - 面包屑导航的当前页用
aria-labelledby="bc-title"指向页面主标题，比写死aria-label="当前：设计系统"更可靠 - 用浏览器开发者工具查元素属性，确认只出现其中一个
- 在 NVDA + Firefox 或 VoiceOver + Safari 下实际听一遍播报内容
- 别信“看起来没问题”，要信“读出来是什么”
- 首选显式
<label for="email">邮箱地址</label><input id="email"> - 若 label 无法包裹（如布局限制），就用
<input aria-labelledby="email-label"><span id="email-label">邮箱地址</span> - 绝对不要只靠 placeholder 或旁边放个
<p>邮箱地址</p>——那只是视觉提示，无障碍里等于没写
优先用 aria-labelledby，而不是 aria-label
只要页面上已有对应文本，就该用 aria-labelledby。它复用真实 DOM 文本，天然支持多语言切换、文案更新同步、SEO 可见性，且不会覆盖元素内部内容——而 aria-label 是硬编码，一旦 UI 改文案或加翻译，就立刻失效。
典型使用场景：
立即学习“前端免费学习笔记（深入）”；
不能和 aria-label 同时出现
aria-labelledby 的计算优先级高于 aria-label，后者会被直接忽略。Lighthouse 和 axe 工具都会报错，而且你写的 aria-label 形同虚设。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
更隐蔽的问题是：当你以为加了 aria-label 就保险了，其实它根本没生效，而引用的 aria-labelledby 目标又恰好不可读（比如 ID 拼错、元素被删），整个控件就对屏幕阅读器“失联”了。
检查方法很简单：
表单控件必须配 label 或 aria-labelledby，不能裸奔
没 <label for="xxx"></label>，也没 aria-labelledby 的 <input>，99% 的屏幕阅读器只会报“编辑文本，空白”，用户完全不知道这个框是填邮箱、密码还是验证码。
实操建议：
最常被忽略的一点：ID 引用必须在 DOM 中真实存在、唯一、且在引用发生前已挂载。异步加载的标题、React/Vue 动态生成的 label 元素，如果生命周期没对齐，aria-labelledby 就会静默失效——它不报错，也不警告，只是不读。
