LessFuss Design

Making a Flash movie accessible can be tricky enough, but before you can allow screen reader users to find their way around your Flash movie, they first have to know its even there. Setting the window mode (wmode) parameter to transparent or opaque is a common practice when embedding Flash – so it behaves itself on-screen – but the setting also renders the movie completely invisible to screen readers and keyboard controls.

What is the Window Mode (wmode)?

Basically, the wmode parameter is used to control how a Flash movie interacts with other web page elements. There are three modes:

1. Window (the default if the parameter isn’t included): used to show a Flash movie in its own rectangular window on a web page. The background colour will be whatever is set in Flash when you export the movie.
2. Opaque: with this setting you can use JavaScript to move the movie around the page, or resize it.
3. Transparent: other content on the page will show through all the transparent parts of the Flash movie – basically, the colour background set when the movie is exported gets ignored.

The trouble with the default window mode

The default wmode value for Flash is the one in which Flash’s animation works quickest. The problem is that with this setting, the Flash movie is placed at the top of the stacking order (in fact Windows effectively displays it in a window above the browser window), no matter how many elements come after it in the source order or how much scripting or CSS is being used to try and and force it down.

This wouldn’t be a problem if the Flash movie was displayed on it’s own, but this is rarely the case. Flash is usually just one part of a web page that includes other HTML and scripting elements, and rarely is it desirable for the movie to sit on the top of everything else on the page. A good example of this are pull-down navigation menus – when you hover on a link and the sub menu pops out, the last thing you want is to have the pull-down disappear behind a Flash movie.

Getting round the problem

Because of this it’s unsurprising that many developers choose to use the transparent wmode value – a solution advocated by pretty much every blog I found on the subject. As far as on-screen behaviour is concerned, the transparent wmode is the most ideal.

Not only does it allow the background to show through the transparent parts of the Flash movie, it also allows you to get the movie back into the order of things on-screen.

Transparent wmode and accessibility

The downside to the solution is that while it works perfectly on-screen, it doesn’t help screen reader or keyboard users. Transparent wmode is the equivalent of CSS display:none, and screen readers (I tested with JAWS 7) don’t even announce there’s a Flash movie present. Likewise with keyboard navigation, where focus just goes straight past the movie to the next item on the screen.

This means that even if you’d made use of Flash’s built in accessibility features, your efforts will be wasted if you’re embedding the movie with the wmode as transparent.

If your Flash movie is being used purely as a piece of decoration then the transparent wmode is ideal – screen reader users would want to skip any content that had no real useful purpose – but if the movie contains content, then embedding it with the transparent wmode parameter will render that content invisible to some users.

Recommendation

Given that using the default wmode setting is simply not practical in most cases, the best course of action is to provide the Flash content in another form where the movie’s being embedded in the transparent mode, and provide an obvious link to it (preferably above where the movie’s embedded).

Providing a non-Flash alternative has long been the accepted practice for making Flash more accessible, but given the advances within flash itself (the ability to provide text alternatives to Flash movie objects and set the tab index of the links) I’m more in favour of trying to make the movie itself accessible rather than offering a link to another version (it’s an added maintenance overhead, for one thing).

But in this case, where the movie itself is invisible to screen reader and keyboard users, it seems like the only way to go.

Further reading

• WebAIM accessible Flash [external link]: a useful article on techniques for making accessible Flash content.