Flash, DHTML Menus and Accessibility

By: Stephanie Sullivan

Page 1 of 1

Set for printing

It's not uncommon to hear developers complaining that their DHTML menus, when triggered, have dropped behind the Flash movie below them. It's also not uncommon to hear, "that's just how they work." Before Flash Player 6, that was true in many browsers. But nowadays, it's become urban legend. With Flash Player 6, Macromedia introduced windowless mode for Netscape and Mac OS X (previously it was supported only for Windows). In the process, this also gave developers a way to completely hide Flash from older screen readers and the issues they can have with it. In fact, when Flash is purely used as eye candy, it's wise to remove it from the flow of the screen reader's page so that they don't have to listen to Flash without a purpose.

Tip: If you've never listened to your Web pages with a screen reader, I highly recommend downloading a trial of either JAWS or Window-Eyes, the two most common screen readers. After you listen for about 5 - 10 minutes, you may change your mind about the manner in which you build your web sites. You may also enjoy reading Tricia Littlefield's article, Accessibility for Profit.

I've had an interest in accessibility for quite some time. Recently, I came across some information on Flash and accessibility at the WebAIM site which triggered me to think of something I'd read at my friend Aziz Perigrino-Brimah's Web site. Those two postings started my recent journey into the Flash realm.

Window Mode (wmode) - What's It For?

There are three window modes. Windowless mode allows you to take advantage of the transparent movie, absolute positioning, and layering capabilities available in the browser. They are controlled with the wmode parameter in the object tag. The default mode is available by either choosing not to specify any wmode, or by using wmode="window". We'll look at Macromedia's explanation of the three modes and then we'll explore them a bit further individually.

  • Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance.
  • Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don't need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through.
  • Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.

While doing some testing for this article I ran into some confusing documentation as well as unexpected testing results. I turned to Mike Chambers to confirm and hopefully explain my findings. Below is much of what we discussed. I hope it clarifies some things for you as well.

Window Mode

By default, the Flash Player gets its own hWnd in Windows. This means that the Flash movie actually exists in a display instance within Windows that lives above the core browser display window. So though it appears to be in the browser window, technically, it isn't. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. However, it is drawing independently of the browser's HTML rendering surface. This is why this default mode (which is equivalent to wmode="window") doesn't allow proper compositing with DHTML layers. This is why your JavaScripted drop-down menus will drop behind your Flash movie.

Most Macintosh browsers will still allow DHTML layers to go over a Flash movie in this mode, however, the movement of the movie will interfere with the content of the DHTML layer and do strange things like erase big chunks of the DHTML layer.

View a demonstration of the default window mode.

Opaque Mode

In windowless modes, Flash Player doesn't have a hWnd. This means that the browser tells the Flash Player when and where to draw onto the browser's own rendering surface. The Flash movie is no longer being rendered on a higher level if you will. It's right there in the page with the rest of the page elements. The Flash buffer is simply drawn into whatever rectangle the browser says, with any Flash stage space not occupied by objects receiving the movie's background color.

This mode is the one that confused me due to this wording: "Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through." Truth is, since by using wmode="opaque", you've placed the Flash Player directly onto the page, it can now accept placement and positioning like any other element. Unless your viewer is not using a compliant browser (list to follow), the z-index will be respected and rendered. So yes, you can move elements behind Flash movies to prevent them from showing through, but you can just as easily move the elements in front of the Flash movies to prevent the Flash from showing through.

Another confusing area was the way Macromedia recommends that you use transparent mode to work with DHTML layers. Due to this, many assumed that transparent mode was the only way to deal with JavaScripted drop down menus. Due to the reasons above, this is not the case. Transparent mode, which we'll discuss in the next section can have some performance issues. If you are simply using a DHTML layer that goes over the Flash movie, it's not necessary to use transparent mode. You can simply use opaque mode.

View a demonstration of opaque mode.

Transparent Mode

In transparent mode, the Flash Player zeros the alpha of the movie background color and draws only the parts of the Flash stage that contain actual objects. It does not draw portions that contain only background. You would need to use wmode="transparent" to do a floating Flash Movie that is irregular or non-rectangular shaped, or to show elements placed beneath the Flash movie. However, as mentioned above, it's likely you will get a performance hit in this mode. So only use it where actual transparency is necessary. Opaque mode is definitely more processor-friendly.

In transparent mode, you may find that lowering your frames per second (FPS) will give you better performance.

View a demonstration of transparent mode.

Be aware: If you have overlayed your Flash movie on top of a DHTML layer containing a text field, you will not be able to get the focus to go to the text field. Each time you click on the text field, the Flash movie will grab the focus. Though I did not experiment with this, Scott Barnes from MossyBlog suggests you may want to swap the z-indexes when you no longer need the overlayed Flash movie.

Windowless Mode is available by publishing for Flash Player 6 or 7 in the following browsers:
  • Windows Internet Explorer
  • Windows Netscape 7.0
  • Windows AOL
  • Windows Mozilla 1.0
  • Mac OS X IE 5.1
  • Mac OS X IE 5.2
  • Mac OS X Netscape 7.0
  • Mac OS X AOL
  • Mac OS X Mozilla 1.0
  • Mac OS X CompuServe
  • This feature is not supported on Mac Classic
  • It does not work in early versions of Opera

Changing the Mode

You may have read that to change the mode, you should go back into Flash and republish your Flash movie. That's not necessary. If you haven't yet published your Flash movie, certainly use the publish settings dialog box to choose your wmode setting. That option is in the HTML tab of the Publish Settings. Choose either transparent windowless or opaque windowless in the tab and publish the document.

If you have already published you can make a change to your HTML code using either Dreamweaver's Property inspector or by editing manually. To use Dreamweaver:

  1. Select the Flash movie in your document in design view.
  2. Choose Parameters in the Properties inspector.
  3. In the Parameter column, enter wmode. In the Value column, enter either transparent or opaque.
  4. Save your document.

If you prefer to edit your HTML by hand, there are two areas you need to tweak:

  1. To the Object tag, add the following parameter (opaque is shown as an example):


    <param name="wmode" value="opaque">

  2. To the Embed tag, add the following attribute:


    wmode="opaque"

Accessibility and Flash

There have long been complaints about Flash and screen readers. Since the release of Flash MX in 2002, Macromedia has put significant effort into removing these barriers. They now include support for creating accessibility properties directly within Flash. (Screen reader users will need to have at least Flash Player 6 installed on their machines.) They've addressed problems common among ActiveX controls that prevented users with mobility impairments from moving easily between Flash and HTML content. They've enabled applications to dynamically update accessibility information as the content in the Flash movie changes through ActionScript. They've also integrated support for Microsoft Active Accessibility (MSAA) with Flash Player 7 to make content available via screen access technologies (this allows the screen readers that use MSAA, like Window-Eyes and JAWS, to build support for Flash into their products). You can read more about the strides they're making and how to create more accessible Flash in the Macromedia Accessibility Resource center.

Though Macromedia has given you new ways of creating accessible Flash, sometimes Flash is non-essential eye candy. Sometimes it's created simply for sighted viewers. (We won't argue the value of this type of Flash. It is what it is.) In other cases, like constantly moving Flash banner ads, older screen readers got stuck with their focus being constantly stolen by the change in the Flash movie. Some screen readers simply could not make it past these and the rest of the page's content was lost to the user. (In my testing, I found that the new versions of Window-Eyes and JAWS seem to have gotten over this hurdle. But not everyone uses these newer, expensive technologies.)

Enter opaque and transparent modes. Both modes will completely hide the Flash movie from the screen reader allowing it to access the content in the rest of the document. And in the case of eye-candy Flash, who would really want to listen to the announcement of the movie, "Macromedia Flash movie start ... Macromedia Flash movie end," if you don't have to? If there's nothing there for them, don't slow them down. Let them get right to the document's content.

Conclusion

This article has shown you reasons you may want to use opaque mode in your Flash movies. Opaque mode allows your DHTML drop down menus to stay in front of your Flash movie as well as hiding non-essential Flash from screen readers. Yes, transparent mode will also allow your DHTML drop down menus to render properly and will hide non-essential Flash, but due to possible performance issues, that's best left for opaque mode. Use transparent mode to show elements stacked beneath your Flash movie and when actual transparency is needed.

Page 1 of 1 1


download
Download Support Files


Keywords
Flash, accessibility, DHTML drop down menus, JavaScript, hiding Flash, JAWS, Window-Eyes, wmode, windowless mode, Flash movie is hiding my drop-down menu, window mode, Flash and screen readers, opaque, transparent, window