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.
Have you already specified an ARIA politeness option when instantiating the widget?
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?
I got this generated script:
Tweets by @LAX_Official
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?
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?
I just used http://wave.webaim.org/toolbar/ to test a simple page in Firefox and it seems happy from an ADA compliance perspective.
I believe you @andypiper. And to add to that, referring to iFrame, another layout issue that our tool reports below:
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?
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.