Flash and Findability . week one
April 16, 2010 at 1:32 am
filed under findability, web standards
Tagged findable flash, research
Flash creates many barriers to SEO and findability. Since Flash content is not written with semantic mark-up, search engines do not easily recognize the information hierarchy and therefore index the information low in search results. Flash content is not always easily accessible to all users who might be using screen readers or to those who are using a mobile connections. If sites are built all in one Flash file the site will create issues for those bookmarking certain pages and will make it difficult for users and search engines to navigate directly to needed content.
With all these difficulties in mind, some techniques are now available to make Flash elements more findable. Search engines look for semantic HTML mark-up, so in order to increase the findability of Flash elements, it is good practice to add HTML substitutes for .swf files. For example, when publishing .swf files from Flash you can add a title and description to the file in the document settings. This information helps search engines recognize information about the Flash content, but regardless, semantic HTML markup will still be indexed higher than Flash descriptions.
While attempting to make Flash or other non-HTML elements findable one must also consider accessibility. Using progressive enhancement to layer in presentation with the established content of a site allows those without Flash players, those using mobile devices, or those using screen readers to still receive the content they need. There are a few progressive enhancement techniques that enhance Flash findability. Creating HTML markup of the website content first and then placing separate Flash files within the HTML provides search-engine friendly content along with the Flash animation. Another progressive enhancement technique to use if placing a Flash element within an HTML site, like a slideshow, is SWFObject. SWFObject inputs the Flash element over the descriptive HTML content that will default if the user cannot see Flash. To use SWFObject indicate the container for the .swf with a <div id>. Inside the container place an alternative image that would replace the Flash element if the user cannot see Flash. Then, apply JavaScript (swfobject.js) to write in the Flash element into the container (see example code below).
HTML/
<div id=”flash_slideshow”>
<a href=”about_us.html” title=”Learn more about Company XYZ”><img src=”assets/images/about_xyz.jpg” height=”600″ width=”400″ alt=”Our mission is to brighten your day!” /></a>
</div>
JavaScript/
<script src=”js/swfobject.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var so = new SWFObject(“slideshow.swf”,”myswf”,”600″,”400″,”8″,”#ffffff”); so.write(“flash_slideshow”);
</script>
With the SWFObject technique search engines will read the HTML markup, the page will degrade gracefully and remain accessible to all users, and those with Flash enabled will easily experience the animation.
Drew McLellan explains his method, Flash Satay, to embed Flash elements and also support web standards (http://www.alistapart.com/articles/flashsatay/). McLellan explains that ridding the content of <embed> and AfterShock options to input Flash, rids the page of un-validated code. Even with Flash elements McLellan’s code follows web standards and provides alternative imagery for those without Flash access.
As revealed through these and other resources (see below), there are many options to increase the findability of Flash and pages with Flash elements. Although not a substitute of clean, semantic mark-up with relevant content, using best practices and web standards guidelines can help Flash findability.
Resources:
Building Findability Websites by Aarron Walter
Flash Satay: Embedding Flash while Supporting Standards by Drew McLellan, an Article on A List Apart
1 comment
RSS /
Comments are closed.
sheree ciappa
You mentioned “see example code” in the 2nd paragraph toward the end but I didn’t see the example code. You should probably copy and paste it in this article.
Can you be prepared to take the class through this tomorrow?