WCAG 2.0的iframe问题

我有4个带有iFrame的页面，返回时出现以下错误2.4.7聚焦可见-突出显示元素。虽然它没有特别提到iframe，但是只有有这个问题的页面才有iframe。我已经附加了唯一与iframe和iframe本身相关联的CSS

希望有人能了解WCAG到底不喜欢什么

<style>
.yt-frame {height: 270px;width: 100%;}
iframe {border: 1px solid black;}
</style>

<iframe src="https://www.youtube.com/embed/VIDEOID?html5=1&amp;rel=0" title="Video From YouTube" class="yt-frame"></iframe>

.yt帧{高度：270px；宽度：100%；}
iframe{边框：1px纯黑色；}

基于，听起来SiteImprove认为

本身的样式是错误的。是任何可以接收焦点的东西的一般信息

SiteImprove可能会将

视为用户可以通过选项卡访问的内容。基于这一假设，SiteImprove注意到，对于专注的

，没有样式

我怀疑SiteImprove在这里使用的启发式方法。例如，Firefox将使用

作为制表位，但Chrome不会

无论如何，尝试添加一种样式，使其（以及其他所有内容）在焦点上有一个轮廓（尽管Firefox不会将其应用于

）：

看看这是否令人满意。如果是这样，那么您可以更具体地使用样式，并满足自动化测试（如果这是您的目标），而不必将样式保留在其他可以集中的元素上：

iframe:focus { outline: 2px solid #f00; }

---

Siteimprove在如何标记这些方面存在缺陷。在过去的几天里，他们的开发人员已经修复了它，我的错误现在被清除了。再次检查你的

什么工具会产生错误？错误本身是什么？可能是

中的YouTube页面失败，这超出了您的控制范围。工具为SiteImprove，错误为“AA错误-突出显示元素2.4.7”，描述如下“通过键盘导航，可以直观地识别重点组件非常重要。如果聚焦组件没有以某种方式高亮显示，则用户无法确定哪个组件具有焦点。“框架在选项卡上有一个可视轮廓。我发现，将iframe:focus添加到我的CSS中并不能消除Siteimprove中的这个错误。我与他们有一张票据，以确定消除错误的最佳修复方案。或者他们的扫描太挑剔了？Chrome、Safari和Edge不使用iframe作为制表位，Firefox和IE则使用iframe。但是在每个浏览器中，一旦焦点集中在iframe中的任何元素上，它都是可见的，因此看起来我满足了WCAG的要求。如果我从Siteimprove获得解决方案，我可以在这里分享。谢谢回复。如果Chrome不会停止在iframe on tab focus，正如您正确指出的那样，那么：focus甚至iframe:focus都不会在这里工作，因为iframe在Chrome中永远不会获得焦点。我想如果我有权访问框架页面，我可以将焦点添加到正文中，但我没有。如果您试图满足SiteImprove验证程序的要求，那么样式可能会满足它。如果SiteImprove通过了，这就告诉您它可能使用Firefox作为代理浏览器，或者它可能只是坚持使用这种风格。不过，这并没有使它变得更有用或更正确。我向他们提交了一张罚单，他们说这是一个已知的问题。很高兴看到它被修好了！

iframe:focus { outline: 2px solid #f00; }