Accessibility - Part 4
Article ID: KB101567
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..."
codebase="http://..."
WIDTH="550" HEIGHT="400" id="myMovieName">
<PARAM NAME=movie VALUE="myFlashMovie.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="myFlashMovie.swf" quality=high bgcolor=#FFFFFF WIDTH="550"
HEIGHT="400"
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http:...">
</EMBED>
</OBJECT>
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...
Flash
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.
Swish
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.)
Notes...
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:
http://www.macromedia.com/go/getflashplayerbutton/
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.]
[ring]
[ring]
Woman crosses room and picks up phone.
"Hello?"
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
Contributors
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
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al0/kb101567.htm
permalink to this article:
http://www.pixelmill.com/support/kb101567.htm
Back to top