title 属性是 iframe 可访问性强制要求，必须用动词开头的具体功能描述（如“在线客服聊天窗口”），不可为空、泛化或使用地址/ID；动态插入、框架渲染、多实例等场景需确保 title 在 DOM 初始化时即存在且唯一。
title 属性不是可选项，是可访问性强制要求。没加 title 的 iframe 在 VoiceOver、NVDA 等主流读屏软件中只会报“框架”或“无标题框架”，用户根本不知道里面是客服弹窗、地图还是登录表单，大概率直接跳过。
为什么 title 必须写，且不能凑合
屏幕阅读器依赖 title 作为 iframe 的唯一语义标识。它不读 src 地址，也不推断内容——哪怕你嵌的是 https://maps.example.com/embed，读屏也不会说“地图”，只会沉默或报“框架”。
-
title=""（空字符串）等于没写，辅助技术会忽略整个iframe区域 -
title="内容"、title="页面"这类泛化描述，和没写效果一样，无法传达用途 - 第三方 SDK（如腾讯地图、Zendesk Chat、Intercom）生成的
iframe几乎都不带title，必须手动包裹或覆盖
title 值怎么写才合格
核心原则：用一句话说明“这个 iframe 是干什么的”，动词开头，具体到功能，不描述技术实现。
- ✅
title="在线客服聊天窗口，支持发送消息和上传文件" - ✅
title="交互式中国行政区划地图，可缩放与点击查询" - ✅
title="第三方登录弹窗，支持微信、支付宝一键授权" - ❌
title="嵌入组件"（太模糊） - ❌
title="map-embed-v2"（是 ID 或类名，不是用途） - ❌
title="https://api.map.io/embed"（地址不是功能）
实际部署时容易漏掉的三个点
很多团队加了 title 还被无障碍扫描工具标红，问题常出在这些细节上：
立即学习“前端免费学习笔记（深入）”；
- 动态插入的
iframe（比如 JS 创建的客服浮窗）：title必须在插入 DOM 时就存在，不能靠后续 JS 补；否则读屏初始化阶段已跳过该节点 - React/Vue 等框架中使用
v-html或dangerouslySetInnerHTML渲染第三方代码：需提前 patch，或用ref拿到元素后立即补title属性 - 同一页面多个同类
iframe（例如 3 个不同城市的地图）：每个title必须唯一且具区分度，比如title="上海门店位置地图"、title="北京门店位置地图"
最麻烦的不是写不对，而是忘了——尤其当 iframe 来自黑盒 SDK 时，title 往往得靠 MutationObserver 监听并注入，或者在加载前用 iframe 元素替换策略兜底。
