How can a Twitter genarated iframe pass Accessibility?

[etoko]

Our site is required to pass an Accessibility certification. Since we include Twitter feeds in our homepage, we are having issues with Twitter generated iFrame which doesn’t have a title. In order to pass the Accessibility test, it should at least have a title on its iFrame. How do we solve this? Your prompt response will be greatly appreciated.

[niall]

Have you already specified an ARIA politeness option when instantiating the widget?
https://dev.twitter.com/docs/embedded-timelines#options

[benward]

Hi Mel,

Which widget are you using? All of the widgets, when initialised by widgets.js set a title on their iframe (“Twitter Tweet Button”, “Twitter Follow Button”, “Twitter Timeline” and “Embedded Tweet”.)

Do you have a URL example where this isn’t the case?

Ben

[etoko]

Thanks for the response @benward and @niall

I got this generated script:

Tweets by @LAX_Official

<script type="text/javascript">
    !function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
        if (!d.getElementById(id)) {
            js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js, fjs);
        }
    }
    (document, "script", "twitter-wjs");
    </script>

And each time I run our ADA compliance report, this part is the only one didn’t pass. Report says iframe should have title. What am I missing on the script?

[andypiper]

That’s weird.

If I paste that widget code into a simple HTML file and load it in Chrome, and then open Developer Tools, I see that it does indeed generate an iframe, with a title.

.... more rendered content ...

I wonder whether your testing tool is not seeing the HTML fully rendered?

[andypiper]

I just used http://wave.webaim.org/toolbar/ to test a simple page in Firefox and it seems happy from an ADA compliance perspective.

[etoko]

I believe you @andypiper. And to add to that, referring to iFrame, another layout issue that our tool reports below:

Layout issue
Presentational attributes such as ‘border’, ‘align’, or ‘bgcolor’ are used. Use CSS for styling instead.

Does the iFrame use any of the setting mentioned? If so, how can I get rid of those?

Thanks again.

[andypiper]

I cannot see those values in the rendered iFrame if I look in Developer Tools in Chrome or Firefox - CSS is being used, and there are some embedded style attributes as well, but no reference to border, align or bgcolor as attributes on HTML elements.

[niall]