Make Flash accessible to screen readers in transparent window mode

The detour around flash for accessibility

Yahoo! Tech’s home page features a flash-based media space that highlights stories, comparisons, buying guides, blog posts, and more. Making this accessible required a bit of trial and error, but the solution was simple and can be used by sites everywhere.

Step 1. Inserting the flash object

The site uses the Unobtrusive Flash Object script by Bobby van der Sluis. This script checks to see if the user has JavaScript enabled and the correct version of Flash in their browser. If so, it inserts the code required to display the movie. If the user doesn’t have the requirements, a default set of information is presented.

This script cures the validation errors caused by the normal flash insertion code. Theoretically, it would also allow you to provide good, accessible content to those not using JavaScript and Flash enabled browsers, i.e. screen readers and search robots.

Window Mode Transparency conflict

However, we had an issue with the flash movie conflicting with a DHTML drop down menu. The flash movie wanted to have the highest z-index and thus sat on top of the menu. To cure this problem, we added the attribute wmode:transparent. This tells the flash movie: your window mode is transparent, you are not the boss, go sit in the back and let others take center stage.

This cured the overlapping issues but negated the accessibility features that we had hoped for. User testing with a screen reader was disheartening. Screen readers ignore flash movies with window mode transparent. They want to do what’s best for the user and ignore the little guy in the back corner.

We began searching for answers on the flash and accessibility forums and couldn’t find a way to get screen readers to read a flash movie with wmode:transparent. It simply isn’t possible at this time.

Step 2. Time for a detour

The U.F.O. enabled page features a div with default text. This is where we originally duplicated the content being fed via xml to the flash movie. Our hope was that the screen readers would ignore the flash and read the HTML content in this div. When this wasn’t possible, we literally thought outside the box.

The U.F.O. script uses visibility:hidden to hide the default box. We tried using text-indent and negative margins instead, but it still was not available to the screen reader.

The default div now has your standard non-optimized warning text: “For the best experience, please enable JavasScript and download the latest version of Flash….”

screen with css disabled - both versions viewable
We then created a new div (id=”alternatecontent”) that features the content from the flash movie. It is pushed off screen by using absolute positioning. This hides the duplicated content from the visual design while providing the content to those without the visual abilities.

We’re satisfying two audiences with just a little extra code. Add the extra div for your screen reader audience (…and search engines!) when using wmode:transparent in your Flash movie. You’ll create valid, visually dynamic, and accessible pages.

Listen to the Yahoo! Tech media space as read by a screen reader (.mp3)


8 responses to “Make Flash accessible to screen readers in transparent window mode”

  1. Ruben Avatar

    you don´t know flash object, try use flash object.

  2. […] We tried to make Yahoo! Tech as accessible as possible. User-testing with Victor Tsaran, Yahoo’s accessibility guru led us to make many small and large changes to the code. I’ve written one article about how we made our home page flash movie accessible and have two more on the way about our comparison tables and how we are displaying our ratings and reviews. […]

  3. […]  ljromanoff has posted a link to a blog post about how yahoo worked around the wmode:transparent issue […]

  4. Hugo Avatar

    The title of this article is misleading. Any ideas on how to make Flash accessible in transparent window mode?

  5. Ted Avatar

    Hi Hugo

    Unfortunately, you can’t make the flash movie available to screen readers when it is in wmode:transparent. That is why we did the work around. Wmode:transparent tells the screenreader the flash movie is irrelevant and should be ignored. Whatever you do to the flash movie’s accessibility is irrelevant.

    This isn’t a bug, it’s a feature that lets screen readers know that a file is fluff and can be passed by.

  6. Hugo Avatar

    I understand what you’ve done, it’s just that the title of the article should more accurately describe that. Something like “Getting around Flash accessibility issues with transparent wmode by using hidden alternate content” for example. Have you considered the implications of this method for a sighted person using keyboard navigation? They will tab off the screen…

  7. […] I’ve written earlier about how Yahoo! Tech used a hidden collection of links to replicate an inaccessible flash movie. In a nutshell: screen readers cannot see a flash movie that has wmode:transparent. To get around this, we duplicated the flash content and moved it off-screen for screen readers and search engines. […]

Leave a Reply

Your email address will not be published. Required fields are marked *