Adding Flash content to a page in an accessible manner

calliandra flower (If you have the Flash 6 player and JavaScript enabled, you will see a slideshow of flowers instead of a single image above.)


Sorry, this post is old, the scripts are no longer here, and there is now a better way to embed Flash. It is called swfobject. Please go there and consider the information on this page obsolete, although it was cool at the time 😉

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” with 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.

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. This could be anything you prefer.

External XML File data

Images to be loaded are defined in an XML file. This means that the same Flash 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.

Thanks

I hava also written a Swedish description of FlashObject.

(Special 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.)

0 0 vote
Article Rating
Per Axbom

Per Axbom

@axbom

Per Axbom är kommunikationsvetaren som föddes i Liberia. I 20 år har han utbildat den digitala yrkeskåren och hjälpt organisationer med digital användbarhet och tillgänglighet. Per gör teknik trygg och omtänksam genom reflektivt resonerande, hänsynstagande design, coaching och utbildning. Du kan höra hans röst på UX Podcast.

Digital omtanke bokomslag Pers nya handbok om etik i teknikbranschen, Digital omtanke, finns att köpa hos Bokus. Den engelska upplagan finns även i Kindle-format hos Amazon.

Anlita Per för föreläsning, workshop eller coachning.

Leave a Reply

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x