You have finished the most amazing flash menu you have ever done. Animation everywhere, soung on rollover, cross-fade and opacity… You are very proud of your work and want to show it to your mum. When she arrives on your website, the content is there, images as well but instead of the state of the art menu she just gets a nice white box… No links to navigate, she’s stuck on your first page.

Flash animations and images are more and more used on internet. The average bandwidth for the user grow so the size of website grow as well. It is now common to see “all in flash” website and hight quality images. I wont blame the designers as long as they keep accessibility in mind.

Provide altenatives:

Flash Header:

You have a nice flash header or animation somewhere on your site? Altenative is simple, put a background image on the div holding your animation. So if the user do not have the right version of flash he will still see a static image. Don’t forget the traditional “You need to upgrade your flash player”. It is always good to keep your user informed that he is missing something.

<div id="flashHeader">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="550" height="400" id="myMovieName">
<param name="movie" value="myFlashMovie.swf">
<param name="quality" value="high"><param name="bgcolor" value="#FFFFFF">
<embed src="/support/flash/ts/documents/myFlashMovie.swf" quality="high" bgcolor='#FFFFFF" width="550" height="400"
name="myMovieName" type="application/x-shockwave-flash"
pluginspace="http://www.macromedia.com/go/getflashplayer"></embed>
<p>
You need to upgrade your flash player, you can download it from adobe website....
</p>
</object>
</div>

#flashHeader { background:#fff url(images/myHeader.jpg) no-repeat; }

Flash Menu:

Provide a html version of your menu, it won’t be displayed if it stay between the <object></object> tags and it can help for seo.

<div id="flashMenu">
<object ...>
<p>
You need to upgrade your flash player, you can download it from adobe website....Use the links below to navigate throught the site</p>
<ul>
<li><a href="page1.html">page1</a></li>
<li><a href=page2.html>page2</a></li>
</ul>
</object>
</div>

#flashMenu { background:#fff url(images/myMenuBg.jpg) no-repeat; }

Images:

Fill the “alt” attributes. That’s all you need to do. If you want to provide even more information you can use an external description file and use the attribute “longdesc” in your image tag.

<img src="images/image.jpg" alt="short description of the image, will be displayed if the image can't" longdesc="description.html" />