1

Our site is trying to be as WCAG compliant as possible, but we are challenged when trying to embed Tweets and Instagrams.

The embed code looks like <blockquote>....</blockquote> but renders on the fly to <iframe></iframe>

Since we have no control over the rendered view, the iframe doesn't have a title for example.

Is there a way or an recommendation to put something in a surrounding <div> that can at least warn the screen reader or other tools that an iframe is happening on an external site.

I tried using aria="section" label="External Website in Iframe" for example, but I don't know if that gets used by the tools and if it's effective enough.

Thanks

Chris ten Den
  • 549
  • 1
  • 5
  • 19

2 Answers2

0

I would add a title on all iframes on the fly, with Javascript - if I would have the correct title. Or make a plugin (wrapper) so that when author pastes the URL of a tweet she must also write the title and then make Javascript to add title attribute to the iframe.

Maybe worth trying?

Dag Eikesdal
  • 43
  • 5
  • the blockquote is converted by JS into the iFrame on the fly already. I would need to loop until the iframe is visible even after load. I would agree it is possible, just really really ugly. – Chris ten Den Mar 19 '21 at 14:03
  • Then can you just generate the iFrame title at the same time maybe? Would have to see the code :D – Dag Eikesdal Mar 19 '21 at 14:18
0

I ran into the same issue and resolved it by grabbing the IFRAME HTML, adding the missing TITLE attribute, wrapping it in a DIV (weird clearfix issue) and publishing that instead. I have only tested this in regard to Instagram.

Chris Petersn
  • 82
  • 5