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
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?
Related
What code elements do I need to add/modify on a Web page to ensure that it gets embedded properly on a facebook status update?!
See below for an example of what I think is a good embed:
Some web pages I tried to embed don't appear very well on facebook i.e. when you put their links in a status update. Also, sometimes it gives you a selection of images to choose from?!
Is this purely a <meta> tag play, or are there other things I could do to ensure that the web page gets embedded the way I want it to (images and all)?!
Thanks.
Yes this is meta tags at work. You need to specify Open Graph metadata to define what appears on Facebook. See http://ogp.me/
Is there something similar to FB.XFBML.parse() but for the HTML5 versions of the social plugins? I don't want to use XFBML...
Basically, I'm building a one page application that needs to change the comments box's data-href attribute and reload based on what content is accessed inside the app.
Calling FB.XFBML.parse() will also reload/reparse HTML5 Like buttons and other Facebook HTML5 social plugins.
In case somebody else comes across this, FB.XFBML.parse() works perfectly unless you pass a parameter to re-parse only part of the document.
If you want to call FB.XFBML.parse( document.getElementById('foo') ) on a specific element, make sure this element contains the HTML5 social plugin and not the social plugin itself.
Otherwise, FB.XFBML.parse() should work in all cases but it will scan the whole DOM.
I am creating a web page that accepts a hyperlink from the user and displays that page in an iframe. While rendering the page, I would like to show just the text and simple colors, thats it.
I would like to block all the media files like images and flash scripts from showing up.
If not an extensive one, for the starters, I would like to confine the scope to .gif, .jpeg, .jpg, .png, .swf.
Or does anyone know of a site with similar functionality?
You can write a simple dom parser and parse the page before show it in iframe. Then before showing it you can remove whatever you want.
your iframe whould like
<iframe src="your_parser.php"></iframe>
In your parser you can get the content from page using file_get_contents() or curl() it is your choise (i would use curl). Then you can remove the media you want.
If you're using Firefox, use the Adblock Plus extension. You can specify the types of items to block via a filter rule. An example (using Safaribooks) looks like this:
||techbus.safaribooksonline.com/static/201109-2191-techbus/images/6.0/*.jpg
However, if you're talking about incorporating functionality into your page to strip out a specific list of content-types, this approach wouldn't help you. You'd need to pull the html source and strip out the offending content-types.
also if you are using cms. you should be turn off bbcode image, and embed html
I am wondering if there's a way I can embed a webclip into a webpage, as in, I can have a portion of a webpage embedded as a widget into another page. I was thinking it might be possible someway though Mac OS X's Dashboard widgets, one can take a webclip and make a dashboard widget, as I hear that they are HTML based, and thus one could reverse-engineer one into simple HTML code. Kind of the reverse of what google does for gadgets. Any ideas? I'm open to any solutions.
Thanks.
The easy, html-based way is with an iframe. What this does is put an entire webpage within a box on your page. You don't have much flexibility with it.
You can also do it with javascript. JQuery makes it easy with their .load() method. Going this route, you can load a webpage with javascript, load specific tags within that page, or even modify the incoming code before displaying it.
Most basically:
$("#xxxx").load("url.html");
Where xxxx is the id of the html tag where you want the content to be loaded on your page (e.g. if you have <div id="xxxx">content will go here</div> in your HTML). See more details at: http://docs.jquery.com/Ajax/load.
If these don't suffice, the next step would be PHP (I doubt you'd need it, but if you'd like to, you car search for file_get_contents on php.net).
When adding a bookmark or favorite the browser uses the TITLE tag of the page to automatically populate the title of the bookmark. However, my web pages use SEO-friendly titles which are not really user-friendly. Is there a method to override the title when the browser makes a bookmark?
I am aware that I can create a link on the page that calls javascript:
javascript:window.external.addFavorite("url","custom title");
But is is possible to do something similar when a user uses the menu or hotkey to create a bookmark?
You're trying to solve the wrong problem.
However, my web pages use SEO-friendly titles which are not really user-friendly
This is what you need to fix. Your page titles should be user friendly.
To be honest, if you're doing it right SEO and User friendly titles should be synonymous... can you post some examples as to why you feel the need for them to be so different?
I can't see how that would be possible. The browser takes the Title loaded, which is the Title displayed on the top of the page. When saving a bookmark, it doesnt go through the code. It just adds the URL and takes the site Title.
You could check if the "bookmark"-pressing triggers a javascript event, though, i think it woudlnt be cross-browser :)