Embedding Flash with high accessibility
(If you have the Flash 6 player and JavaScript enabled, you will see a slideshow of flowers instead of a single image above.)
This example shows how Flash content should be embedded in a web page in a way that promotes accessibility as well as searchability.
Invisible jump code
First off there is an invisible image above the Flash movie that allows users of text readers to skip straight to the content. If you have relevant text content in your “flashcontent”-div (see below) this may not be necessary.
Ordinary div
There is an ordinary div with an id of “flashcontent” containing html code for an ordinary image. The content in this div is replaced with the Flash movie if the user has the required version of Flash. If Flash is not shown, the div is rendered as part of the page.
Detection and embedding with JavaScript
In this example I am embedding content using JavaScript. If JavaScript is deactivated, or if the user does not have the required Flash player, the user is presented with a static image. The alternative content could be anything you prefer.
External XML File data
Images to be loaded are defined in an XML file. Which XML file is defined in a URL parameter when embedding the Flash move. This means that the same Flash movie can be re-used and updated without Flash coding. When possible, use external data loading with XML; this makes your solution so much more useful.
Voila!
As you can see, even search engines can read the content in the div – and people who can see the Flash movie will see it. What else could we ask? Well perhaps that Flash detection could be performed with something other than JavaScript.
But that’s another story…
Now, read how you can use this method with FlashObject.
Important about accessibility
Even with this technique you should of course ensure that you have provided a name and/or description using the built-in accessibility features of Flash.
Compulsory Reading: Creating Accessible Macromedia Flash Content.
Thanks
- Thanks to Geoff Stearns of deconcept for the JavaScript, aka FlashObject.
- Thanks to Todd Dominey of What do I know for the Flash slideshow component (modified by me).
I have also written a Swedish guide to FlashObject.
There is also a Swedish version of this page.
Files
Files are referenced in the source code.
(Browser note: If you are using Firefox and can not see the Flash movie, chances are you need to disable Object-tabs in the plug-in known as Adblock.)
