First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Bob Regan, Adobe | Website: http://weblogs.macromedia.com/accessibility/.

Flash 8 Accessibility Design Guidelines

Text Equivalents

Macromedia Flash 8 offers the most powerful tools available for the development of accessible rich media. Whether using ActionScript or the Accessibility panel in Macromedia Flash, creating accessible Flash content can be quick and easy. Using text and text equivalents, designers and developers of Macromedia Flash content may create engaging and exciting content for users of screen readers and other assistive technologies.

At the same time, the screen reader environment poses new challenges for many designers and developers. Just as designers and developers are mindful of the user experience in a browser or stand-alone environment, it is important to consider how users of assistive technologies such as screen readers will interact with Macromedia Flash content.

Using Microsoft Active Accessibility (MSAA), Macromedia Flash Player 8 exposes Macromedia Flash content to the screen reader. Text contained within a Macromedia Flash movie is exposed by default; however, graphic elements are not exposed automatically. As in HTML, graphic elements require a text equivalent that is read by the screen reader in place of the image. Using ActionScript or the Accessibility panel in Macromedia Flash, designers and developers can easily assign text equivalents for elements in Macromedia Flash content. In most cases, the greatest challenge for designers and developers is deciding when to use text equivalents and what they should say.

Macromedia Flash 8 Application with accessibility panel open

(+) View larger

This document explains when and how to use the Accessibility panel in Macromedia Flash to add text equivalents to elements of a Macromedia Flash movie. Continue reading for information on the following topics:

Text in Macromedia Flash Player 8

By default, Macromedia Flash Player 8 exposes all text elements to the screen reader user. Designers and developers do not need make any modifications. For example, the simple Macromedia Flash banner below was created by adding text to the stage. A screen reader would read this banner as ?Trio Motor Company.?

Screen shot of the Macromedia Flash MX stage with a text banner reading

(+) View larger

Adding Text Equivalents in Macromedia Flash 8

Now, take a look at another example that will require a text equivalent. In the example below, the Macromedia Flash logo is displayed. The entire logo is not actually text, but a graphic.

Macromedia Flash Professional 8 logo

Since the logo not text, a screen reader will not read it. In this case a text equivalent should be provided. To add a text equivalent, use the Accessibility panel. First, make sure the logo is selected. Before adding a text equivalent to this item, the object must be saved as a symbol in the library. Since text equivalents are not supported for graphic symbols, save the object as a movie symbol or a button.

To bring the Accessibility panel to the front, press Alt + F2.

Accessibility panel in Macromedia Flash 8 with ?Macromedia Flash 8? in the name field

Notice the two fields titled ?Name? and ?Description.? In general terms, the name field is used for shorter text equivalents and the description field is used for longer ones. (This parallels the use of the ?alt? and ?longdesc? attributes in HTML.) In more practical terms, the difference is less important since screen readers read both by default.

Deciding on the proper text equivalent is not always easy. In most cases, it is wise to consider the purpose of the image rather than giving it a merely literal description. In the example above, a description may read, ?Red letter f.? This will not be particularly helpful information to a screen reader user. By contrast, the phrase ?Macromedia Flash? might be a more meaningful equivalent for the logo.

In this case a description would not likely be necessary. Descriptions are best used in cases where the text equivalent needs to be longer than about 50 characters. One thing to keep in mind is that the description is generally read following the name. If the content does not flow when the two are read together, the designer/developer may choose not to use a name, only a description of the object.

Accessible Elements of a Macromedia Flash Movie

By default, Macromedia Flash 8 is able to make text, input text fields, buttons, movie clips, and even entire movies accessible. While text elements do not require modification by the designer/developer, other elements do. Designers and developers may use the Accessibility panel in Macromedia Flash to add a text equivalent or even to hide elements from assistive technologies.

In the example below, the Macromedia Flash movie shows a moon orbiting a planet. In this case, it is not appropriate to provide a text equivalent for the moon and the planet separately. Instead, the relationship between these two elements needs to be conveyed to the user.

To provide a single text equivalent for this entire movie, first make sure that nothing in the movie is selected. In the name field, add the text equivalent ?Moon orbiting planet.? The name may differ depending on the context, but this equivalent will suffice for our purposes here. Note that this text equivalent conveys not only the contents of the movie but how the separate elements relate to one another.

To group the contents of this movie formally together, deselect ?Make Child Objects Accessible.? This step tells the screen reader to use this text equivalent for the entire movie.

Macromedia Flash 8 accessibility panel with 'Make child objects accessible' option off
» Level Intermediate

Added: 2006-08-02
Rating: 5 Votes: 4
» Author
Bob Regan is a solutions architect for vertical markets at Adobe Systems, Inc., serving as the technical lead for the Education, Government, Financial Services, Manufacturing, Telecommunications and Life Science markets. Bob is also an accessibility advocate with Adobe where he looks at accessibility issues from product design, engineering and content authoring through to the end user.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.