support > HTML and the Web > Accessibility > Accessibility - Part 4

Accessibility - Part 4

In previous articles we've talked about how to get your images and image maps to conform to the accessibility guidelines. Checkpoint 1.1, which was to provide text alternatives for various media, also requires you to provide text equivalents for Flash/Swish animations and movies, along with applets, audio files, and other types of embedded objects. Other checkpoints require you to provide alternative content for various media.

This month we'll be talking about how to make your embedded Flash or Swish movie accessible. This is a very broad topic, so we'll only cover the basics! Making applets and other objects accessible is fairly similar in concept, but we'll cover that next month.

Your mission, should you choose to accept it...

The key concept for accessible multimedia is to imagine if you were deaf or blind... how could you get access to the information on your page? For example, if you have an audio track on your page (snippets from a movie, or a song, etc.), you may want to include a text transcript so that people who are deaf can still understand your page. Or, if you have a Flash movie embedded in your page with animated text or objects, you should include some audio with the movie describing what's going on for someone who is blind. And in both cases, be sure to have some text (either on the page, or accessed through a link) that has text equivalent that can be used by a screen reader.

Here's a word picture (albeit a bit overused, but it'll make our point): Think of accessibility as the peak of a mountain. You are the park ranger in charge of maintaining the trails that go up the mountain. There are several different trails, so you have to make sure that you cover all of them (in an ideal world) so that someone can take any path and still get up the mountain.

Going back to web-language, the different paths may be:

Now that you have an idea of your goal, we'll get into the how-tos. It may get a bit technical, but we hope you'll come away from this article with a good sense of how to make your movie accessible.

Use the OBJECT and EMBED tag...

First, your Flash or Swish movies should be embedded into the HTML using both the "OBJECT" and "EMBED" tags. This ensures that your movie plays on as many browsers as possible. To check this, click on the movie in your page and switch to HTML view. The code should be highlighted... it may be a large chunk of code, but look for "OBJECT" and "EMBED." The code should look something like this:

<OBJECT classid="clsid:D27CD..."
WIDTH="550" HEIGHT="400" id="myMovieName">
<PARAM NAME=movie VALUE="myFlashMovie.swf">
<PARAM NAME=quality VALUE=high>

<EMBED src="myFlashMovie.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"


If your code only has the EMBED tag, or only the OBJECT tag, you will need to edit your code. If you own Flash or Swish, both programs have HTML generators that make it easy for you to do this. If you don't own Flash or Swish, copy the code in the text box below and modify the variables. If you need help, visit Macromedia support.

No Flash or Swish? Try this...

Publish your movie, specifying HTML. Go to File > Publish Settings and make sure that the HTML checkbox is checked. Then, go to File > Publish. Go to the folder that contains your Flash file, and you should see an .html file. Open that in a text editor and copy the code starting with <OBJECT...> and ending with </OBJECT>. Paste this into the HTML of your web page.

After exporting your .swf movie, go to File > Export > HTML to Clipboard. Then, simply go into your web page HTML and Edit > Paste (Ctrl-V) the code into your HTML. (For alternative instructions, take a look at Swish's site.)

If you already had either the OBJECT or EMBED tag in your page and are manually editing the code without Flash or Swish, use the same information for the movie name (myFlashMovie.swf), width, height, and background color (bgcolor) for the other tag.

Some additional precautions...

There may be some people who don't have the Flash player and won't be able to view your movie. The first thing you'll want to do is to make sure that you provide a link that they can use to download the files. For example, you may want to use this button below:

Get Macromedia Flash Player

The second thing you will want to do is to include the "NOEMBED" tag within your code. Immediately after the </EMBED> tag, type in this code:

<NOEMBED>Your HTML text or images here</NOEMBED>

In between the tags, you may include HTML code -- for example, include an image that is a "still shot" of your animation with some text description.

Textual Descriptions and ALT descriptions...

Then, you'll want to add the ALT description in the EMBED tag. Your EMBED tag should look something like this:

<EMBED ... ALT="This animation shows clouds moving across a sky.">

Some screen readers don't look at the ALT tag. You'll want to put the same information in a <NOEMBED></NOEMBED> tag, like this:

<OBJECT ...>
 <PARAM name="movie" value="mymovie.swf">
 <EMBED ... src="mymovie.swf" alt="This animation shows clouds moving across a sky."></EMBED><NOEMBED>This animation shows clouds moving across a sky.</NOEMBED>

Finally, it's also a good idea to put more text on your page (or put a link on your page that goes to more text) that describes the movie or animation.

Translate Your Media

If your movie has visual movement going on -- text animating across the screen, various imagery, etc. -- you'll want to add some kind of audio track to your movie that tells vision-impaired users what is going on. For example, add a voice-over reading the text out loud and describing any movement or animation that is essential to the user's understanding.

Or, if audio is essential to understanding your movie (for example, the movie shows a woman's face as she talks), be sure to provide captions/subtitles so that hearing-impaired users can know what's going on.

And finally, you'll want to provide a textual "script" of your entire movie, perhaps accessible by a link next to the movie. Be sure to describe all the essential text, movement, or sounds. Pretend you are a Hollywood scriptwriter and try to come up with something like this:

[Phone rings.]



Woman crosses room and picks up phone.


Directly Accessible Movies

If your Flash movie requires user interaction -- for example, mousing over menus, manipulating an interface -- you'll want to make it directly accessible; that is, you'll want to build the movie so that the movie itself is accessible (as opposed to your "web page" being accessible). This goes a bit beyond the scope of our article, and really has more to do with Flash than anything else. The latest version of Flash has a lot of great accessibility features for building accessible movies and interfaces. You may want to check out Macromedia's site to learn more.

As far as we know, Swish doesn't have any built-in accessibility features. We could be wrong, though -- let us know!

FrontPage and Accessibility
Unfortunately, FrontPage doesn't have many built-in tools to help you get your Flash or Swish movies accessible. You'll have to hard-code your changes in the HTML, following the instructions in this article. However, FrontPage 2003 will have some Accessibility tools that may help you.

Next: Applets & Other Objects


Corrie Haffly:
Corrie is the author of the Accessibility series, which appeared in the PixelMill Newsletter. Though you may not know her name, Corrie has become one of the top experts in the FrontPage Template industry. You may know her work better under the name John Galt's Templates. See Corrie's stunning products today!  John Galt's Templates

John Galt's Tools, PixelMill Newsletter, Volume 2 - Issue 8 : 08/01/2002

Back to top