« July 2005 | Main | September 2005 »
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 09:46 PM | Comments (21)
August 08, 2005
Flash 8 Arrives!
To kick off the new release, I thought I would start with a note about the best feature of Flash 8, in my humble opinion. A small but significant change was made to the player that allows authors to partially specific the reading order of a Flash Movie. This means that author no longer have to specify the reading order for an entire movie. One forgotten object will not break the entire movie. One piece of static text does not muck up the program.
In Flash Player 6 and 7, the single biggest technical headache was managing the tab order. You had to test the movie multiple times a day to ensure that the reading order had not gone off the rails. In Flash Player 8, it gets much better.
I built out some test cases similar to a set I did about a year ago to help developers understand the new feature. Try these out with a screen reader or download the source files and check them out for yourself.
Reading Order Cases
The following is a list of scenarios illustrating how .tabindex can be used to control reading order in Macromedia Flash Player 8.
Default Behavior
Case 1
Three pieces of static text on the stage. Red from left to right, “Third, Second, First”. No ActionScript is defined.
Basic Reading Order
Case 2
Three pieces of dynamic text on the stage. Each has an instance name specified. The tab order is specified using ActionScript to read from right to left, “First, Second, Third”.
_root.first_txt.tabIndex = 1;
_root.second_txt.tabIndex = 2;
_root.third_txt.tabIndex = 3;
Partial Reading Order
Case 3
Four pieces of dynamic text on the stage. Each has an instance name specified. The third text object is not listed in the tab order. The tab order is specified using ActionScript to read from right to left, “First, Second, Fourth”. The third object is placed at the end of the reading order.
_root.first_txt.tabIndex = 1;
_root.second_txt.tabIndex = 2;
_root.fourth_txt.tabIndex = 4;
Case 4
This is the same as Case 3, but with a circle drawn on the stage. This does not affect the reading order.
Case 5
This is the same as Case three, but the circle has now been saved as a graphic symbol. This does not affect the reading order.
Case 6
This is the same as Case 4, but this time the circle has been saved as a movie clip symbol. No instance name is specified and the symbol is left out of the tab order in the ActionScript. This does not affect the reading order.
Scoping
Case 7
This is the same as Case 2. This time, the static text element is saved as a movie clip, given an instance name and the movie clip is placed in the tab order. The reading order reverts to the default.
_root.first_mc.tabIndex = 1;
_root.second_mc.tabIndex = 2;
_root.third_mc.tabIndex = 3;
Case 8
This is the same as Case 2. This time, the path for each object is relative, not absolute. This does not affect the reading order.
this.first_txt.tabIndex = 1;
this.second_txt.tabIndex = 2;
this.third_txt.tabIndex = 3;
Use of .silent and ._visible
Case 9
Four pieces of dynamic text on the stage. Each has an instance name specified and listed in the tab order. The third text object has the .silent property set to true. The third object is not read.
_root.first_txt.tabIndex = 1;
_root.second_txt.tabIndex = 2;
_root.third_txt.tabIndex = 3;
_root.fourth_txt.tabIndex = 4;_root.third_txt._accProps = new Object();
_root.third_txt._accProps.silent = true;
Accessibility.updateProperties;
Case 10
Four pieces of dynamic text on the stage. Each has an instance name specified and listed in the tab order. The third text object has the ._visible property set to false. The third object is not shown or read.
_root.first_txt.tabIndex = 1;
_root.second_txt.tabIndex = 2;
_root.third_txt.tabIndex = 3;
_root.fourth_txt.tabIndex = 4;_root.third_txt._visible = false;
Loading movies into a parent swf
Case 11
This movie loads three child movies into the parent shell. The tab order is specified in each of the child .swfs. The tabIndex values for each of the child .swfs are unique. The text reads in alphabetical order.
Posted by Bob Regan at 06:35 PM | Comments (7)