Flash Accessibility Design Guidelines

Using Microsoft Active Accessibility (MSAA), Adobe Flash Player 9 exposes Flash content to the screen reader. Text contained within a 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 Flash CS3, designers and developers can easily assign text equivalents for elements in Flash content. In most cases, the greatest challenge is deciding when to use text equivalents and what they should say.

This page explains when and how to use the Accessibility panel in Flash CS3 to add text equivalents to elements of a Flash movie.

Text in Adobe Flash Player 9

By default, Adobe Flash Player 9 exposes all text elements to the screen reader user. You do not need to make any modifications. In the example below, the text was added to the stage, and a screen reader would read the text as "Stars!" without any developer effort.

---

Adding text equivalents in Adobe Flash CS3 Professional

In the example below, the Adobe Flash logo is displayed. The entire logo is not actually text, but a graphic this will require a text equivalent.

Since the logo is not text, a screen reader will not read it. In this case, a text equivalent should be provided to be accessible to a screen reader.

To add a text equivalent, use the Accessibility panel:

• Select the logo.
• Then to Convert to Symbol, press F8. Before a text equivalent is added 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 Shift + F11.

Notice the two fields titled "Name" and "Description." The Name field is used for shorter text equivalents, and the Description field is used for longer ones. (This is similar to the use of the alt and longdesc attributes in HTML.) Screen readers read both by default. Please be sure to use meaningful equivalents and keep in mind descriptions are generally read following the name. Descriptions are best used where the text equivalent needs to be longer than about 50 characters. 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. 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.

Back to the Top

Try it out!

1. Open Flash.
2. Save the "Adobe Flash Professional CS3" image into the library.
3. Save the image as a movie symbol or a button.
4. Drag the image to the stage.
5. Assign a text equivalent to the image using the accessibility panel.
6. Test with a screen reader.

Bonus - Try making a text field dynamic!

1. Try it adding a text field under the image.
2. Make the text field dynamic.
3. Click in the text field.
4. In the Property inspector, make sure Dynamic or Input is displayed in the drop down menu.
5. Enter an instance name for the text field.
6. In the Line Type box, specify one of the following options:
   • Multi line - Displays the text in multiple lines.
   • Single line - Displays the text as one line.
   • Multi line No Wrap - Displays text in multiple lines that break only if the last character is a breaking character, such as Enter (Windows) or Return (Macintosh).
7. To enable users to select dynamic text, click Selectable . Deselect this option to prevent users from selecting the dynamic text.
8. To preserve rich text formatting (such as fonts and hyperlinks) with the appropriate HTML tags, click Render Text As HTML .
9. To display a black border and white background for the text field, click Show Border .
10. Click Embed for embedded font outline options.
11. Test in a screen reader using Internet Explorer 5 or higher.