aria-label和aria-labelledby的本质区别是文本来源不同：前者直接写死字符串，后者引用页面中真实存在且可见的带ID文本节点；aria-label会完全覆盖元素内所有内容，aria-labelledby则依赖ID存在性与可访问性，二者不可共存且后者优先级更高。
aria-label 和 aria-labelledby 的本质区别是什么
根本不是“哪个更好用”，而是“文本来源不同”： aria-label 是直接写死一段字符串，aria-labelledby 是引用页面里真实存在的、带 id 的可见文本节点。前者像贴便签，后者像拉一根线连到已有文字上。
这个差异直接决定维护成本、多语言支持能力和动态更新表现——比如改了 UI 上的标题文案，用了 aria-labelledby 的按钮朗读内容自动同步；用了 aria-label 的就得手动改 HTML 属性，漏改就错位。
什么时候该用 aria-label
只在元素**完全没有可见文本**，且无法靠原生语义（如 label、button 内容）补救时才用。aria-label 会彻底覆盖元素内所有内容，包括子元素和文字。
-
<button><svg></svg></button>这类纯图标按钮必须加aria-label，否则读屏器只报“按钮” -
<div role="button" tabindex="0">⚙️</div>中的 Emoji 不被识别为有效文本，得靠aria-label="设置" -
<div class="spinner" role="status"></div>需要aria-label="加载中"让状态可感知 - 禁用场景：
<input>已有<label for="xxx">时再加aria-label，Lighthouse 直接报错；<img>加aria-label而不用alt，语义冲突
什么时候该用 aria-labelledby
aria-labelledby 的前提是：你要朗读的文本已经以可见方式存在于页面中，并且有唯一 id。它不生成新文本，只是“指过去”。ID 不存在、拼错、或目标元素不可访问（如 display: none 或 aria-hidden="true"），它就静默失效——不报错，也不读。
立即学习“前端免费学习笔记（深入）”；
-
<h2 id="modal-title">编辑用户</h2><button aria-labelledby="modal-title"></button>：复用标题，避免重复写文案 -
<canvas aria-labelledby="chart-title chart-desc"></canvas>：空格分隔多个 ID，按顺序拼接朗读 - 表单字段上方有视觉分离的
<h3 id="field-label">收货地址</h3>，但无法用<label for>关联时，可用aria-labelledby - 绝对不要给
<svg>自身加aria-labelledby——<svg>默认不可聚焦，读屏器跳过；必须写在外层可交互容器上，如<button aria-labelledby="icon-desc"><svg></svg></button></li> </ul> <H3>两者同时存在会发生什么</H3> <p><code>aria-labelledby
优先级永远高于aria-label，只要写了aria-labelledby，aria-label就被完全忽略——不是兼容性问题，是规范强制行为。实际调试中最常踩的坑是“为保险起见两个都写”，结果
aria-labelledby指向的 ID 不存在，又没 fallback，整个可访问名称为空。Chrome DevTools 的「Accessibility」面板里看「Name Computation」一栏，比肉眼检查属性是否存在更可靠。ID 的存在性验证和键盘交互配套，是最容易被跳过的两步。写完
aria-labelledby，记得确认目标元素是否渲染、是否可访问；写完aria-label，记得确认外层容器是否具备焦点能力（tabindex="0"、role等）。
