必须为每个iframe显式设置具体title属性，如“嵌入式高德地图，用于查找门店位置”，空值、泛化值或动态插入后补设均无效；第三方iframe需手动补全，跨域广告应外层声明aria-hidden并提供替代文本。
iframe 的 title 属性不是可选，而是无障碍强制要求
没加 title 的 <iframe> 在 VoiceOver、NVDA 或 JAWS 中只会读作“框架”或“无标题框架”，用户完全无法预判内容类型。这不是体验打折，而是直接导致关键区域被跳过——比如嵌入的客服弹窗、登录表单、地图，视障用户根本不知道那里有东西可交互。
必须为每个 <iframe> 显式设置 title，且值要具体：title="嵌入式高德地图，用于查找门店位置"，不能是 title="地图"、title="内容"，更不能留空或写 title=""（屏幕阅读器会读作“空白”）。
- 第三方 SDK（如地图、客服 widget）生成的
<iframe>通常默认无title，需在插入后手动补全 - 动态插入的 iframe（例如滚动触发加载）必须在 DOM 节点挂载完成瞬间设置
title，不能依赖初始 HTML - 若 iframe 内容本身含多个嵌套 iframe（常见于广告或富媒体），外层
title对内层无效，需逐层补全
为什么给 iframe 加了 title 还被屏幕阅读器忽略
常见错误是以为设了 title="广告" 就算完成义务，但实际中该属性常被覆盖或失效：
- 广告 SDK 在运行时重写整个
<iframe>节点或修改src，原始title被丢弃 - 同源 iframe 可通过
iframe.contentDocument注入语义，但多数广告跨域，只能靠window.postMessage向内发送描述文本，由广告方脚本配合添加aria-labelledby或role="application" - 完全不可控的托管广告（如 Google Ad Manager）应在外层容器用
aria-hidden="true"显式声明不可访问，并提供替代文本：<p aria-live="polite">此处为第三方广告位，内容由外部服务提供，不参与本页无障碍导航</p>
title 和 aria-label / aria-labelledby 能否混用
不能替代，也不建议叠加。HTML 规范明确要求 <iframe> 必须带 title 属性，这是可访问性基线；而 aria-label 和 aria-labelledby 是 ARIA 补充机制，仅当 title 不足以表达上下文时才额外使用。
立即学习“前端免费学习笔记（深入）”；
-
title是唯一被所有主流屏幕阅读器原生识别的 iframe 无障碍标识，兼容性最稳 -
aria-label在部分浏览器+读屏组合下可能被忽略（尤其旧版 IE + JAWS） - 若同时存在
title和aria-labelledby，NVDA 优先读aria-labelledby指向的内容，但 ChromeVox 仍读title，行为不一致 - 真实项目中，只用
title+ 必要时用aria-describedby补充操作说明（如“按 Enter 键打开聊天窗口”）
动态 iframe 的 title 设置时机与风险点
延迟加载、IntersectionObserver 触发、postMessage 响应后注入的 iframe，最容易漏掉 title。此时 DOM 已存在，但焦点管理、语义树构建都已完成初始化，后续补 title 不一定被读屏实时捕获。
- 必须在
iframe元素插入 document 的**同一 microtask** 中设置title，推荐写法：const iframe = document.createElement('iframe');<br>iframe.title = '嵌入式在线客服，支持文字与文件传输';<br>iframe.src = 'https://chat.example.com/widget';<br>container.appendChild(iframe); - 避免先 appendChild 再 setAttribute，中间若有其他 DOM 操作或 focus 移动，读屏可能已跳过该节点
- 使用
loading="lazy"时，title必须随元素一起存在，否则懒加载完成前无障碍树已定型 - Shadow DOM 中创建的 iframe，
title仍有效，但需确保其宿主元素未设aria-hidden="true"，否则整块被屏蔽
真正难的不是写对 title，而是守住「每个 iframe 都必须有语义」这条线——它会被动态脚本抹掉、被第三方覆盖、被懒加载节奏甩开。只要有一个漏网，对依赖屏幕阅读器的用户来说，那个区域就等于不存在。
