updated: September 6th, 2006 / Ross Johnson / 1 Comments

Simple Accessible/SEO Flash

Right off the bat I would like to mention that I am not a huge fan of flash, especially for navigation or important elements. However – lots of people like the multimedia enrichment that it can provide, and done correctly it is not that inaccessible. Most of the time people use silly hacks like XML sitemaps, or additional links at the bottom of the page to cater to users who don’t have flash enabled… but this is sub-par and inacceptable in my book.

The solution? Javascript and DOM scripting are our friends!

While Macromedia has released their own tool kit, and there are other alternatives, I would rather resort to javascript to keep things simple. The benifit here, not much code, no mixing of javascript and VBScript, and by default it displays the non-flash alternative. This is why I am thankful we can use javascript to alter a page based on the presense of flash, and hide/show div’s based on it’s findings. Let’s first take a look at detecting javascript. From adobe’s own page we can use the following if statement:

if (navigator.mimeTypes && navigator.mimeTypes[“application/x-shockwave-flash”]){ …code… }

Here is our plan – By default, we will have our accessible XHTML/CSS only section present (in this example we will use a navigation bar) , if flash is detected our script will hide the div containing the accessible section and write in our flash code. While this will require calling javascript in the body (less than optimal) it will allow us to pass in variables so we can use the same script for many different flash objects.

The CSS

#no-flash li {
display: inline;
list-style: none;
margin: 0 2em;
}

The HTML

<div id=”nav_div”>
<div id=”no-flash”>

<ul id=”no-flash”>
<li><a href=”index.html”>Home Page</a></li>
<li><a href=”About.html”>About Us</a></li>
<li><a href=”Contact.html”>Contact Us</a></li>
</ul>
&alt;/div>

<script type=”text/javascript”>flash.detect(‘navigation_flash.swf’ , 640, 200,’no-flash’);</script>
</div>

The Javascript

As you can see, we call the flash.detect(); function at the bottom of the div. We want to pass in five variables, the name
of the flash file, the dimensions (height and width), the name of the css element to hide, and the name of the div to resize to the flash dimensions (so that the flash movie isn’t clipped off). So flash.detect( ‘movie name’ , width, height, ‘css element’, ‘div id’). Here is our script:

function flash.detect (movie_name, movie_width, movie_height, hide_id) {
if (navigator.mimeTypes && navigator.mimeTypes[“application/x-shockwave-flash”]){

//There is flash present, so hide the stylized list in the element passed into variable “hide_class”

document.getElementById(hide_class).style.display=’none’;

//…write out the code required to render the flash movie .

document.write(‘<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″‘);
document.write(‘codebase=”http://active.macromedia.com/flash/cabs/swflash.cab#version=3,0,0,11″‘);
document.write(‘width=”‘ + movie_width + ‘” height=”‘ + movie_height + ‘” name=”sw” id=”sw”>’);
document.write(‘<param name=”Movie” value=”‘ + movie_name + ‘” >’);
document.write(‘<param name=”quality” value=”high”>’);
document.write(‘<param name=”Loop” value=”true”>’);
document.write(‘<param name=”play” value=”true”>’);
document.write(‘<EMBED SRC=”‘ + movie_name + ‘” WIDTH=”‘ + movie_width + ‘” HEIGHT=”‘ + movie_height + ‘” LOOP=”true” QUALITY=”high”>’);
}

Trouble in paradice (or hell? IE)

Of cource it couldn’t be that simple. IE doesn’t label flash as a plug-in, so we have to create a flash document through javascript and confirm the flash player version in order to detect it.

else {
for(var i=9; i>0; i–){
flashVersion = 0;
try{
var flash = new ActiveXObject(“ShockwaveFlash.ShockwaveFlash.” + i);
flashVersion = i;
return;
}
catch(e){
//There is flash present, so hide the stylized list in the element passed into variable “hide_id”

document.getElementById(hide_id).style.display=’none’;

//…write out the code required to render the flash movie .

document.write(‘<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″‘);

document.write(‘codebase=”http://active.macromedia.com/flash/cabs/swflash.cab#version=3,0,0,11″‘);
document.write(‘width=”‘+ movie_width +'” height=”‘+ movie_height +'” name=”sw” id=”sw”>’);
document.write(‘<param name=”Movie” value=”‘+ movie_name +'”>’);
document.write(‘<param name=”quality” value=high>’);
document.write(‘<param name=”Loop” value=”true”>’);
document.write(‘<param name=”play” value=”true”>’);
document.write(‘<EMBED SRC=”‘ + movie_name + ‘” WIDTH=”‘ + movie_width + ‘” HEIGHT=”‘ + movie_height + ‘” LOOP=”true” QUALITY=”high”>’);
}
}
}

Now all we have to do is link the javascript file in our <head> </head> section and we are golden! You can download the javascript file here, and take a look at an example page here.

One thought “Simple Accessible/SEO Flash

Comments are closed.