iframe 的 title 属性必须写，因为不加会导致屏幕阅读器跳过或报“内嵌框架，无描述”，违反 WCAG 2.1；title 应清晰描述功能与上下文，长度≤100字符，避免技术术语，并排除 aria-hidden、隐藏样式及动态插入遗漏等问题。
iframe 的 title 属性为什么必须写
不加 title 属性的 iframe 会被屏幕阅读器直接跳过或报“内嵌框架，无描述”，导致视障用户完全不知道这个区域是干啥的——比如登录弹窗、地图组件、第三方评论区，全成黑盒。WCAG 2.1 要求所有非装饰性 iframe 必须有可访问的名称，title 是最直接、兼容性最好（IE9+、所有主流读屏）的实现方式。
title 值怎么写才不算敷衍
不能写“框架”“内容区域”这种废话，得让用户一听就懂用途和上下文。实际开发中常见错误是照搬 src 地址或组件名，比如 title="https://api.example.com/widget" 或 title="CommentWidget"，读出来毫无意义。
- 描述功能 + 所属上下文：比如评论区写
title="用户对文章《前端性能优化实践》的评论" - 含交互提示：登录弹窗写
title="第三方微信快捷登录窗口，关闭后返回原文页面" - 避免纯技术词：不用
"React iframe wrapper"，改用"实时汇率查询工具" - 长度控制在 100 字符内：太长会被截断，JAWS 和 NVDA 默认只读前 120 字符左右
title 不生效？先查这三件事
写了 title 却没被读出来，大概率不是属性本身问题，而是被其他机制覆盖或阻断了。
-
iframe加了aria-hidden="true"或tabindex="-1"：这两个属性会主动屏蔽可访问性信息，删掉 - 父容器用了
display: none或visibility: hidden：隐藏状态下的iframe即使有title也不被解析，改用opacity: 0; position: absolute;配合aria-hidden="false"控制显隐 - 动态插入的
iframe没补title：JS 创建时容易漏，比如document.createElement('iframe')后必须手动设el.title = "xxx"，不能只靠 HTML 模板
比 title 更强的替代方案存在，但别乱换
title 是底线，不是上限。真要追求更高分，可用 aria-label 或 aria-labelledby，但它们有明显限制：
立即学习“前端免费学习笔记（深入）”；
-
aria-label优先级高于title，但 Safari + VoiceOver 对它的支持不稳定，某些版本直接忽略 -
aria-labelledby要求目标元素在 DOM 中存在且可见，如果标题文本是 JS 动态渲染的，可能触发时机错位 - 若
iframe内容本身有<title>标签（如嵌入独立网页），浏览器会优先用它，此时外部title属性会被无视——这种情况必须改用aria-label覆盖
多数业务场景下，老老实实写好 title 就够过无障碍审计；想升级方案，先测 Safari/VoiceOver 和 JAWS 的真实行为，别信文档。
