« Flash 8 Arrives! | Main | AJAX Access »
August 20, 2005
In search of... a perfect plugin technique
Bob and I frequently field questions and read posts on lists related to the ‘right’ way to include Flash content in a web page. Several developers have made efforts to find a technique to do so that doesn't break page validation, including Drew McLellan's Flash Satay, Bobby Van Der Slius's UFO, Geoff Stern's FlashObject, and a nested object method provided by Ian Hickson.
Being at Macromedia and focused on accessibility, my primary concerns are that the Flash content is available to any browser capable of displaying Flash and that users who interact with the Flash content can do so in an accessible fashion. Validity is nice to have, but not at the expense of the other two concerns.
I created a few test files that represent different approaches to including Flash in a web page and then tested them. Methods, testing criteria, and results at the end of this posting.
Conclusion
I won't make you wait until the end. The main points to convey are:
- If you need a method that works everywhere, and don't mind using IE-specific (but valid) comments, the nested object method is for you (I'd like to thank Ben Curtis for pointing out my error on this one – I originally omitted the IE comments, which affects the performance, and the overall results of the investigation).
- FlashObject and UFO objects work fine with assistive technology, but if access for non-javascript users is a concern then div that is replaced would need an equivalent version of the Flash content in HTML, which is increasingly difficult as the Flash becomes more complex and interactive.
- Flash Satay objects are not properly read by JAWS, rendering the content inaccessible to screen reader users. The satay method is good in every way analyzed in this study, but unfortunately JAWS ignores Flash embedded in this way. The data exists in MSAA, as shown in MSAA inspection tools and by Window-Eyes reading the content correctly.
The best solution? Using a server-side scripting language (ColdFusion, ASP, PHP, etc), a developer could deliver a page that satifies all requirements to individual browsers without too much difficulty. The issue is delivering one version that satisfies all. Short of that, I do think that the UFO method is very useful, but prefer the Flash default and the nested object methods. I'd rather deliver code with small validity issues than shut out a whole class of users, and I am a little wary of proprietary IE comments.
Thoughts, comments, additional data welcomed.
Methods tested
- Flash default
- This is what is created by the Flash authoring tool.
- Flash default, less embed
- Same as the Flash default, but with the embed element removed .
- Flash Satay
- This technique uses a single object element and no embed element, but differs from the Flash default object's code.
- UFO / FlashObject
- These techniques use javascript to replace a div element with the necessary markup for Flash to be included in the page.
- Nested Objects
- Uses an object within an object. The general idea is that the first object works in IE-based browsers, and the inner object works in Gecko-based browsers such as Firefox. In this example there are IE-specific comments that prevent IE from displaying both objects.
Criteria
- Browser display
- Tested whether the Flash content displays in IE, Firefox, and Safari. Not a comprehensive list, but these are baseline requirements.
- MSAA
- I used Inspect32.exe to view the MSAA data tree to verify whether information is provided to this API for screen readers to use.
- Keyboard access (independent of screen reader use)
- This is as important as screen reader access.
- Acceptance testing in a few screen readers and talking browsers
- Agan, not a comprehensive list, but an important selection. If anyone with another tool that isn't list wants to send additional results, we'll post them, once confirmed.
- Valid HTML
- Is the code valid HTML or XHTML?
- Uses embed element
- Is the embed element used for some browsers? You can decide if generated HTML needs to be valid or if this is OK...
- Requires Javascript
- Is javascript required to display the Flash?
Results
| Flash default | Flash default, less embed | Flash Satay | Unobtrusive Flash Object (UFO) | FlashObject | Nested Objects | |
|---|---|---|---|---|---|---|
| Test File | example | example | example | example | example | example |
| IE 6.0, SP2 | ok | ok | ok | ok | ok | ok |
| Firefox 1.0.4 | ok | no flash loaded | ok | ok | ok | ok |
| Safari 2.0 | ok | ok | ok | ok | ok | ok |
| Opera 8.02 (Win) | ok | ok | ok | ok | ok | ok |
| MSAA | Uses ActiveX data | Uses ActiveX data | Uses ActiveX data | Uses ActiveX data | Uses ActiveX data | Uses ActiveX data |
| non-SR keyboard access | ok in IE | ok in IE | ok in IE | ok in IE | ok in IE | ok in IE |
| JAWS 6.20.065 | ok | ok | not read | ok | ok | ok |
| JAWS 6.10.1006 | ok | ok | not read | ok | ok | ok |
| JAWS 5.00.844 | ok | ok | not read | ok | ok | ok |
| JAWS 4.50.138 | ok | ok | not read | ok | ok | ok |
| Window-Eyes 5.0 | ok | ok | ok | ok | ok | ok |
| HPR 3.04 | ok | ok | ok | ok | ok | ok, but text inside the inner object is also read by HPR. |
| Valid HTML | No | Yes | Yes | Yes | Yes | Yes |
| Uses <embed> | Yes | No | No | Yes | Yes | No |
| Requires javascript | No | No | No | Yes | Yes | No |
Posted by akirkpatrick at August 20, 2005 09:46 PM
Comments
To sacrifice accessability to achive validation is of course misplaced priorities.
But I use Geoff Sterns Flashobject (similar to UFO) nowadays to embed the flash contents.
There is for me several reasons apart from validation that make it preferable compared to default MM code.
Mainly neat maintainable code with version dectection and easy setting of variables thru javascript.
The concern that there is users without javascript
is of course a hindrance, but the amount of users than have javascript disabled and flash player installed is very few according to the logs I have at least.
I always ensure that I display alternative content for users without Flash, so it's not really much of an issue if both people without flash player and with JS disabled get to see that instead.
They are usually the same people in my experience.
Posted by: Leo at August 22, 2005 08:17 AM
ditto.
FlashObject is really easy to work with. It even supports the Flash Express Installer now.
Posted by: interfaSys at August 22, 2005 09:02 AM
I use Stern's as well - it's quite good. I recommend anyone have a look themselves.
Posted by: Josh Ulm at August 22, 2005 12:03 PM
I also recommend Geoff's FlashObject. Besides the support for Express Installer, by far the biggest advantage of FlashObject over UFO is that the Flash content is displayed immediately with FlashObject, while UFO does not display the Flash until the page has loaded.
Posted by: John at August 23, 2005 08:48 AM
Ok, I hear you. FlashObject data is now officially part of the test. If works fine as far as screen readers tested are concerned, similar to UFO, as Leo noted.
Posted by: AWK at August 23, 2005 09:33 AM
Thanks for the matrix, Andrew. As long as we're checking how various common browsers handle invoking the correct Netscape Plugin from the OBJECT tag, then a prior entry at Geoff Stearns' place has 92 comments, many of which detail smaller losses of functionality:
http://blog.deconcept.com/2005/03/31/proper-flash-embedding-flashobject-best-practices/
Posted by: John Dowdell at August 23, 2005 02:53 PM
I suspect that if you put the conditional comments back into your nested object demo, as per Hixie's demo, then the highlighted problems would disappear. If you're not familiar with conditional comments, they are an IE-proprietary tag that are valid (X)HTML comments; you might have skipped them thinking they were plain comments but they essentially turn off the internal object for IE while being meaningless comments for all compliant browsers. This would likely solve IE's issues with the code. Are Window-Eyes and HPR screen readers based on IE? If so, they should also be helped.
Nicely done. Thanks for the work.
Posted by: Ben Curtis at September 13, 2005 03:50 PM
Ben, thanks for pointing that out. You are absolutely right, and I've made a few changes in the post to reflect it.
Posted by: AWK at September 16, 2005 08:11 AM
Would this variation on Hixie's demo be any good?
http://www.zaidesign.net/dev/flash/web_standards/flash_c/1_1/
Posted by: David Smith at October 12, 2005 08:42 AM
Adding an image of the flash object as background will display the image if javascript and flash are diabled.
Posted by: datanumeric at December 20, 2005 06:26 AM
Both UFO and FlashObject use embed, so should not be marked as valid HTML.
Embed is not part of the HTML spec.
Posted by: Derek at December 22, 2005 06:37 AM
Derek,
I alluded to that in the criteria and recognize that the validity of the generated content is important to some developers. If so, then you may want to avoid UFO and FlashObject.
AWK
Posted by: AWK at December 22, 2005 07:08 AM
In the nested object test file you didn't close the last param tag which causes it to not validate.
:)
Posted by: Mark B. at December 23, 2005 06:53 AM
Fixed - thanks Mark!
Posted by: AWK at December 23, 2005 08:27 AM
I have noticed flash objects not compatiable with firefox? do you find the same?
Posted by: Zaur at January 3, 2006 06:25 PM
Thanks for the work.
;)
Posted by: podis at January 5, 2006 06:33 AM
Does JAWS skip the OBJECT altogether when using Flash Satay?
Why not include a text/graphical equivalent for the flash movie beneath it, inside the same OBJECT tag? Will JAWS read that?
Posted by: Joost Bastings at January 6, 2006 11:30 AM
hi,
can anyone suggest a method to search inside the swf file .
i am embed the swf inside the html using flashobject.js
Posted by: karthick at January 27, 2006 05:00 AM
I have with interest looked at your different solutions and settled on the nested objects. I would like to point out that your example in flash_nestedobjects.html also lacks the IE condititional comments. Furthermore, I tried the working example with IE with ActiveX turned off. It did not show the alternative content, as it is also commented out. If you change you example to this below, it works. As you can see, I have added a <div> with a size to contain the content in the area set aside for the flash object.
<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="300" height="120">
<param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<!--[if !IE]> <-->
<object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
width="300" height="120" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
<!--> <![endif]-->
<div style="width:300px; height: 120px; overflow:auto">
<h2>Transcript of interview<h2>
...
</div>
<!--[if !IE]> <-->
</object>
<!--> <![endif]-->
</object>
Posted by: Soren at February 8, 2006 09:32 AM
Interesting post!
Thanks!
Posted by: musique gratuite at February 14, 2006 08:38 AM
The problem with EOLAS made now that IE actualizations doesn't show correctly object tags
The nested object now has a problem with navigation, so I skiped to FlashObject.
related link: http://blog.deconcept.com/2005/12/15/internet-explorer-eolas-changes-and-the-flash-plugin/
Posted by: JH Saucedo at April 25, 2006 05:41 PM