Account services

What's in your browser?

Unable to detect a flash player (JavaScript is disabled).

Embedding Flash content

Macromedia Flash has always been able to generate an HTML page that contains Macromedia Flash movies. Since Adobe/Macromedia is the inventor of Flash it stands to reason that they know how to embed Flash in HTML, right? However, the HTML code the tool generates, produces pages that are invalid. If we are to be strict about our requirements that all pages must validate, then we must find a correct approach. This page describes what we've come up with.

Flash and accessibility

The release of Macromedia Flash MX and Flash Player 6 marked the first accessible versions of the Flash platform. (Note how we have specified version 6 as the lowest acceptable version in the example below.) As of today, Freedom Scientific's JAWS (version 4.5 and better), GW Micro's Window Eyes (version 4.2 and better), and Dolphin's HAL are screen readers that read out the information inside Flash objects and let the user activate buttons etc.

If a screen reader chooses to understand the Flash object, it should not also read out the degraded content. That would be a bug in the screen reader.

Graceful Degradation

Since different browsers support different elements, graceful degradation is the key to making sure that pages are readable and accessible in all browsers. When a browser encounters tags it doesn't understand or can't display, degradation takes place. Whether this degradation will cause some of your page content to be lost to the browser, or whether the content of your page can still be accessed fully is dependent on whether the degradation is graceful.

The HTML standards were written with graceful degradation in mind. New attributes to older tags are safely ignored so that the rest of the tag can still function normally, and new tags are written with alternative display for browsers that don't support them in mind. There are many elements of HTML that can't be displayed or can be turned off in browsers that were written with the knowledge of these elements- such as images, Java, and frames. Using the appropriate methods to provide an alternative message to those who can't see those elements or have turned them off is one way to design for graceful degradation.

If you design pages with graceful degradation in mind, by utilising the built in elements of the HTML standards, and the advice provided here, you can design pages that should degrade gracefully in all browsers and are accessible.

What does this mean for Flash? Eventhough Flash is available in all the popular browsers, there are some that don't have it, such as the search engine indexers (Googlebot) and braille readers. Therefore it is necessary to provide as much as possible of the content in an alternative way rather than force the user to install Flashplayer.

The code

The code example below sets off a 300x120 pixels area of the page to either show the movie or the fallback content. If the content takes up more space than 300x120 pixels then the webbrowser will introduce scrollbars. This is to avoid distortion of the page. As you can see, there are two <object> elements. The outer one is used by Internet Explorer, and it has a white background. The inner one is played by all other browsers, and there you will see a blue background.

Finally, inside the innermost <object> element there is a <div>. It contains the textual fallback content, and will mainly be seen by Google, but sometimes humans. It can contain regular HTML code.

<object id="flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
        width="300" height="120">
 <param name="movie" value="flash.swf" />
 <param name="quality" value="high" />
 <param name="bgcolor" value="#FFFFFF" />
 <!--[if !IE]> <-->
 <object name="flash" data="flash.swf"
         width="300" height="120" type="application/x-shockwave-flash">
  <param name="quality" value="high" />
  <param name="bgcolor" value="#AAAAFF" />
  <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
 <!--> <![endif]-->
  <div style="width:300px; height:120px; overflow:auto">
   <h3>FLASH PLAYER NEEDED</h3>
   The browser will show this content with scrollbars if there is no flash plugin.
   It will be read by google and contribute to the page rank. Therefore write a textual
   representation of the content of your Flash object.
  </div>
 <!--[if !IE]> <-->
 </object>
 <!--> <![endif]-->
</object>

If you see the Flash example with a white background your browser uses the outer object. If the background is purple, it uses the inner object.

FLASH PLAYER NEEDED

The browser will show this content with scrollbars if there is no flash plugin. It will be read by google and contribute to the page rank. Therefore write a textual representation of the content of your Flash object.

Rewind | Play

How to test it

Change the security settings in Internet Explorer to disable ActiveX scripts. This also deactivates Flash. You will then see the alternative content as well as get a request to activate ActiveX. Select Tools→Internet Options. Click on the Security tab, and then on Custom Level. On the menu item "Run ActiveX controls and plug-ins", select Disable.

How to control the Flash

If you want to send commands to the Flash object, say to rewind or play, you must give the object an id as in <object id="movie".... But the thing is, you can't use the same id on both objects, and you don't know which object is played by the browser. Internet Explorer plays the outer object, whereas all other browsers play the inner object. IE actually doesn't even see the inner object. What we do is to use id for the outer object, and name for the inner object. Then you can control the object the conventional way with onclick="window.document.flash.Rewind();".

In fact you don't know if the webbrowser understands any of the two objects. In that case you'll get an error message in the javascript console. If you want to avoid that or you want to do more complex operations, then you can turn to Javascript. Now the hack with id and name becomes slightly more cumbersome. You must first see if there is an element with the name you look for. Remember IE won't see that object. If there isn't then you look up on the id. Like this:

function playvideo(flashid){
	n = document.getElementsByName(flashid);
	if (n) {
		f = n.item(0);
	} else { // Try the IE object
		f = document.getElementById(flashid);
	}
	if (f) {
		f.Play();
	}
}

Examples of other embedding techniques