0

I have 4 pages with iframes that are coming back with the following error 2.4.7 Focus Visible - Highlighting elements. While it does not specifically say anything about the iframe, the only pages with this issue have iframes. I have attached the only CSS associated with iframes and the iframe itself.

Hoping someone has some insight on what exactly WCAG does not like.

<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>
echristo66
  • 198
  • 1
  • 14
  • What tool is generating the error? And what is the error itself? It may be failing the YouTube page within the ` – aardrian Apr 12 '17 at 17:40
  • The tool is SiteImprove and the error is "AA error - Highlighting elements 2.4.7" With the following description "With keyboard navigation it is important that the focused component can be visually identified. If the focused component is not somehow highlighted, the user cannot be sure which component has focus." The frame has an visual outline on tab. – echristo66 Apr 13 '17 at 20:43
  • I have found that adding iframe:focus to my CSS does not eliminate this error in Siteimprove so far. I have a ticket open with them to determine the best fix to eliminate the error. Or maybe their scan is being too picky? Chrome, Safari, and Edge do not use iframe as a tab-stop, Firefox and IE do. But in every browser once the focus is on any element inside the iframe, it is visible so it seems like I'm meeting the WCAG requirement. I can share back here if I get a solution from Siteimprove. – JOWSUU Apr 21 '17 at 14:43

2 Answers2

0

Based on your follow-up comment, it sounds like SiteImprove is considering the style on the <iframe> itself to be the error. WCAG 2.4.7 is a general message for anything that can receive focus.

SiteImprove may be seeing the <iframe> as something a user can tab to. As a result of that assumption, SiteImprove is noting that there are no styles for a focused <iframe>.

I am suspect of the heuristics SiteImprove is using here. For example, Firefox will use an <iframe> as a tab-stop, but Chrome won't.

Regardless, try adding a style to give it (and everything else) an outline on focus (though Firefox won't apply it to the <iframe>):

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

See if that satisfies SiteImprove. If it does, then you can be more specific with the style and satisfy the automated test (if that is your goal) without leaving the style on every other element that can be focused:

iframe:focus { outline: 2px solid #f00; }
Community
  • 1
  • 1
aardrian
  • 8,581
  • 30
  • 40
  • Thanks for the reply. If Chrome wont stop at iframe on tab focus, as you correctly pointed out, then :focus or even iframe:focus wont work here because the iframe never gets the focus in Chrome. I suppose if I had access to the framed page I could add the focus to the body but I don't. – echristo66 Apr 19 '17 at 14:14
  • If you are trying to satisfy the SiteImprove validator, then the styles may satisfy it. If SiteImprove passes it, that tells you that it may be using Firefox as its proxy browser or it may just insist on that style being there. That does not make it any more usable or correct, though. – aardrian Apr 19 '17 at 14:28
0

Siteimprove had a bug in how they were flagging those. In the past few days, their devs have fixed it and my errors are cleared now. Check yours again!

JOWSUU
  • 1
  • 3