aria-labelledby引用的ID必须真实存在、已挂载且可访问，否则屏幕阅读器静默跳过；需用document.getElementById()验证，避免ID拼错、动态生成冲突、重复ID、隐藏元素或与aria-label共存等问题。
aria-labelledby引用的ID必须真实存在且已挂载
写完aria-labelledby="xxx"后，浏览器不会报错，但若id="xxx"的元素根本没渲染出来、被JS删掉、或ID拼错（大小写、空格、下划线遗漏），屏幕阅读器就静默跳过——不读、不提示、不报错。这是最常被忽略的“失效黑洞”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 在控制台运行
document.getElementById("xxx")，确认返回的是期望的DOM节点，且node.nodeType === 1（不是null） - SSR渲染后做hydration时，检查是否因状态不同导致目标元素被条件渲染跳过
- Vue/React中避免用计算属性动态拼接ID字符串，比如
:aria-labelledby="'label-' + index"，容易因响应式更新滞后导致ID值与DOM实际状态不一致 - 多个相同ID（如循环生成未加唯一后缀）会导致只第一个生效，用
document.querySelectorAll('[id="xxx"]')查重
目标元素必须可见且可访问，不能靠display:none或aria-hidden
aria-labelledby不是“指向ID就行”，它要求目标元素对辅助技术真正可达。一旦被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>为某列输入框提供标签时，注意JS折叠行或隐藏列会连带让<th>不可访问 <li>动态切换UI状态（如模态框关闭、选项卡隐藏）时，同步检查关联的ID元素是否仍满足可见+可访问条件</li> <h3>多ID引用必须空格分隔，且顺序决定朗读顺序</h3> <p>想把标题、提示、状态三段文字合并成一个标签？可以，但<code>aria-labelledby="title hint status"里的ID必须用空格分隔，逗号、换行、制表符全无效。更关键的是：读屏器严格按这个顺序拼接朗读，顺序错了会干扰理解。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 主信息放前面，辅助说明放后面。例如
aria-labelledby="field-label field-hint field-error"，而不是"field-hint field-label" - 不要用
aria-labelledby="id1,id2"——逗号分隔会被当做一个ID名去查找，必然失败 - 组合朗读内容需语义连贯，避免生硬拼接。比如
<span id="price">¥99</span><span id="unit">/月</span>配aria-labelledby="price unit"比单独写aria-label="¥99/月"更灵活，但若unit是“件”而非“月”，就得改ID或调整结构
不能和aria-label共存，否则后者被彻底忽略
同时写
aria-label="提交"和aria-labelledby="submit-btn-text"看似“双保险”，实际是自欺欺人。aria-labelledby优先级更高，aria-label被浏览器直接丢弃。而一旦submit-btn-text失效（ID不存在/被隐藏），整个可访问名称就空了——用户听到的可能是“按钮”而非“提交”。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用Chrome DevTools打开「Accessibility」面板，看「Name Computation」一栏是否显示有效来源。别信HTML里写了就算数
- 真要fallback，得靠JS逻辑兜底：先查
document.getElementById()是否存在且可访问，再决定是否回退到aria-label（通过JS动态设置） - 表单控件优先用原生
<label for="xxx">，只有跨结构、无法包裹、或需复用多处文本时才用aria-labelledby
- 主信息放前面，辅助说明放后面。例如
