如何优化嵌入第三方无 alt 图片内容的 iframe 网页可访问性？

是否属于可访问性问题？ #

• 从WCAG SC 1.1.1标准的代码合规性来看，iframe内的图片缺失替代文本（alt）确实属于不符合项，这也是axe工具标记问题的原因。
• 但实际访问体验上，你已经为iframe设置了aria-label和title属性，部分屏幕阅读器（如你使用的Orca）会将iframe视为一个独立的功能容器，读取你设置的标签后不再遍历内部DOM元素，因此不会对用户造成实际访问障碍。
• 总结：这是代码层面的合规性问题，但如果iframe的功能已通过外部标签清晰传达，不一定会产生实际的可访问性障碍。

可行的优化方案 #

由于同源策略限制无法修改第三方iframe内容，可通过以下方式优化整体可访问性：

• 细化iframe的可访问性标签：将aria-label的描述写得更精准，比如改为“交互式星空图，可拖动浏览星区、点击查看天体详情”，让用户直接了解该区域的功能。
• 添加辅助说明文本：在iframe附近添加一段仅屏幕阅读器可见的文本（可通过sr-only类实现，视觉上隐藏但屏幕阅读器可读取），补充说明星空图的内容和操作方式，例如：“此星空图由多张天体图片拼接而成，支持拖动切换星区，点击天体可查看详细信息”。
• 反馈给第三方开发者：联系WikiSky的开发团队，告知其内容存在可访问性缺陷，建议为拼接图片添加合适的alt文本——纯装饰性图片可设置alt=""，功能性图片添加对应描述。

内容的提问来源于stack exchange，提问作者Kyle Beechly