Skip to Page Content | Navigation for Module


Navigation for Module 5: Flash
Page 5 of 11

  1. *Introduction
  2. *Files You Need
  3. *Interface of Flash MX
  4. *Accessibility Issues
  5. * Text Equivalents
  6. *Speaking Order
  7. *Animation
  8. *Closed Captioning
  9. *Publish to Blackboard
  10. *Publish to WebCT
  11. *Resources

Text Equivalents in Flash

Estimated Time to Complete:

30 minutes

Objective:

In this lab, you will learn how to:

Prerequisites:

A basic working knowledge of Flash.

Version Information:

Flash MX and higher only.

Files:

Introduction

One of the basic techniques that all Flash designers know is how to manipulate images and include them in their own presentations. Images usually dominate what the user sees, but also present accessibility issues. With the recent release of Flash MX, you can help individuals who rely on screen readers. This lab will walk you through the steps involved and give you a glimpse at the new accessibility panel. The lab is purposely kept simple, and the techniques you learn here will be used in other labs.

Providing text equivalents is one of the most effective ways to open up your presentation to individuals with vision disabilities. The text equivalents will be exposed to a screen reader, which then reads your text to the user.

Note: Not all graphics need to have a text equivalent. If you feel that a graphic does not convey any information, it is best to hide this graphic from the screen reader.

Getting started

Creating a presentation

To Begin:

  1. Start Flash MX.
  2. Create a new file.

To import the images:

  1. Select the 'File' menu.
  2. Select import .
  3. Browse to the directory containing Smiley.gif and hammer.jpg.
  4. Select hammer.jpg and press the 'Open' button.
  5. Slide the hammer image to the upper left part of the stage.
  6. Repeat the process for Smiley.gif .
  7. Slide the smiley image below the hammer image.
  8. Add the static text 'The Happy Hammer Company' to the right of both the smiley and hammer images.
  9. Add static text "Where our hammers are happy" underneath the text above.

You should now have something that looks like Image 1:


Description of Image 1: The Flash presentation with Smiley.gif, hammer.jpg and the static text on the stage


Review how a screen reader would read the Flash presentation in its current status:

As a designer, you now have to make a decision. Does the hammer image convey information? Since it is the logo of the company, then you should have a description of the hammer hitting a nail. The smiley face is less important, so you could hide it from the screen reader.

Working with the Accessibility Panel

There are two elements that you can expose to the screen reader that benefit the user:

Begin by making the image accessible.

To convert an image to a symbol:

  1. Select the image using the arrow tool, then right-click on the image. This will bring up a submenu.
  2. Select the 'Convert to Symbol' menu item, which brings up the Convert to Symbol dialog box (see Image 2)
  3. For the behavior, select 'Movie Clip.'
  4. Give it an appropriate name, such as Hammer_Image.
  5. Press the 'OK' button.

    The Convert to Symbol Dialog Box
    Image 2: Convert to Movie Clip to make image accessible.

To assign text to an image:

  1. If the Properties Panel is not showing, press Ctrl-F3.
  2. Select the Hammer_Image that you created in the previous step.
  3. In the properties window on the right-hand side, select the icon of a little man (see Image 3).

    The Little Man
    Image 3: "Little man" icon in Convert to Symbol Dialog Box

  4. You should now see the Accessibility Panel (see Image 4).


    Description of Image 4: Accessibility Panel for Flash

  5. By default, the 'Make Object Accessible' checkbox is selected. This allows you to type in a descriptive name.
  6. Although there are no elements inside this element, deselect 'Make Child Objects Accessible'.
  7. For the name, type in 'A hammer hitting a nail.'
  8. For the description, type in 'This image depicts a hammer hitting a nail, which is our company logo.'
  9. Leave the shortcut blank.
  10. Close the dialog box.

Note: It is important to include the punctuation in the alternative text. The comma denotes a brief pause to the screen reader. Not having the punctuation can cause the screen reader to run the sentences together.

You have now made a single image more accessible by supplying a text equivalent for it. Make the movie even more accessible by doing the same for the entire presentation. It follows the same format. To do this, you will need to get the accessibility panel for the stage.

To make a movie accessible:

  1. Deselect all elements by selecting in a blank space somewhere on the stage, such as the upper-left or lower-right part of the screen.
  2. You can now select the accessibility icon in the Properties Panel, the same way you did for the hammer image.
  3. This will bring up a slightly different dialog box (see Image 5).


    Description of Image 5: Accessibility Panel with Auto Label feature

  4. For this dialog (see Image 5 ) make sure the 'Make Movie Accessible' checkbox is selected, as well as the 'Make Child Objects Accessible'.
  5. The 'Auto-Label' checkbox is irrelevant in this case. For more information, see the section below on Advanced Topics.
  6. For the name field, type 'The Happy Hammer Company Presentation.'
  7. For the description field, type 'This presentation is for the Happy Hammer Company, a company devoted to making hammers happy!'
  8. Close the dialog box.

Advanced Topics

Exposing and Hiding Child Objects

There are two other short topics that need to be addressed. The first is the 'Make Child Objects Accessible' checkbox. This checkbox works with elements that contain other elements, and determines whether or not those inner elements are read by the screen reader. For example, the movie you just created has a text equivalent, but also contains inner elements that you wish to have read. If you had deselected the 'Make Child Objects Accessible' checkbox, the screen reader would have never read the hammer logo, nor the text of the Happy Hammer Company. While in this case it probably will not matter, you can imagine that normally there would be much more text in the presentation.

Auto Labeling

Whenever a designer works with user interface elements, such as buttons and textfields, they are usually associated with some kind of text, such as the label on a button. Flash will, by default, try to associate labels that are relatively close to buttons and textfields to those buttons and textfields. In other words, the screen reader will assume that a label appearing close to a button belongs to that button. Sometimes this is a nice feature; but it has the restriction of only associating one word for the entire label! If you want multiple words to be read for a user interface component, you will need to add an alternative text as described in this tutorial. The problem now is that you may have two pieces of text that need to be read for only one component. To eliminate this, turn off auto-labeling, such that it only reads the explicit alternative text you typed in, and not the label that is closest to it.

Testing

Your screen reader is not capable of reading your Flash presentation from within Flash.

To test your movie:

  1. Start your screen reader.
  2. Then, inside Flash, select the 'File' menu, then the 'Publish Preview' sub-menu, and finally the 'Default HTML' item.

Optionally, you can press Ctrl-F12. This will generate a temporary file that your screen reader can read.

Note: you will probably want to download a screen reader such as JAWS if you have not already.

Summary

In this lab, you were taught:

The next lab will present a lab on the speaking order of elements in Flash.

Top of Page arrow up
       Page 5
Next Page Next
Page 6:
Speaking Order


 
-- END OF PAGE