Accesibility with Macromedia Flash MX Basic Hints Macromedia Flash MX allows designers and developers to create powerful web applications that are exciting, engaging, and accessible to all. With new features integrated into Macromedia Flash Player 6 and the Macromedia Flash MX application, users of assistive technologies can now access the best experience on the web. Designing accessible content requires designers and developers to pay attention to the user experience. Since many Macromedia Flash MX designers and developers are not familiar with the capabilities of screen readers and other assistive technologies, this document provides several hints to keep in mind while creating content in Macromedia Flash MX. These hints are not intended to be a complete list or serve as design guidelines for accessibility in Macromedia Flash MX; rather, they are intended to provide helpful information to designers and developers striving to create accessible content in Macromedia Flash MX. Be sure to visit the Macromedia Accessibility Resource Center for up-to-date information on Macromedia Flash MX and other Macromedia products. The following are some practical suggestions for optimizing the accessibility of your Macromedia Flash content: Provide text equivalents for graphic elements in Macromedia Flash MX. Provide names for graphic icons. Add text equivalents for gesturing animations that highlight an area of the page. When you use a feature such as Break Apart for text, be sure to provide a name or description. Consider visual relationships among elements when adding text equivalents. Think about whether it is most helpful to provide a name for each element in a movie, or whether the name should instead reflect a group of elements. For example, for an animation of the solar system, the description "animation of solar system" may be more meaningful than "Mercury, Venus, Earth," and so on. Avoid animating the text, buttons, and input text fields in your movie. Each time a Macromedia Flash movie updates, the screen reader receives a command to return to the top of the page. In the case of the Window-Eyes screen reader from GW Micro, the user will hear, "Loading page load done" each time the screen reader returns to the top of the page. If you keep text, buttons, and other objects stable, you reduce the chance of causing a screen reader to emit extra chatter that may annoy users. For the same reason, avoid the use of looping movies. Remember that sound is a very important medium for most screen reader users. Consider how the sounds in your movie, if any, will interact with the text spoken aloud by screen readers. If you have a lot of loud sound, it may be difficult for a screen reader user to hear what the screen reader is saying. On the other hand, some quiet or well-placed sound can greatly enhance the experience. When creating interactive movies, make sure that users can navigate through your movie effectively using only the keyboard. Ensure that users can operate simple buttons and forms with the same keystrokes as in other applications. If you are using ActionScript to capture 1
keystrokes, be sure to test the application in a screen reader. Different screen readers may process input from the keyboard differently. Try not to present information in your movie that remains on the screen for only a short time. Screen readers may have a difficult time keeping up with quick changes (for example, scenes that change every three seconds) in Macromedia Flash movies. You can resolve this type of problem by adding Next buttons that control scene movement, or by including the full string of all of your text as a description for your entire movie. 2
Text equivalents Macromedia Flash MX offers the most powerful tools available for the development of accessible rich media. With the new Accessibility panel in Macromedia Flash MX, creating accessible Macromedia Flash content is quick and easy. Using text and tex t equivalents, designers and developers of Macromedia Flash content can 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 must be 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. In general, designers and developers of Macromedia Flash content need to consider three key factors: Text equivalents Animated elements Tab order Through the use of Microsoft Active Accessibility (MSAA), Macromedia Flash Player 6 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 for the screen reader to read in place of the image. Using the Accessibility panel in Macromedia Flash MX, designers and developers can easily assign text equivalents for elements in Macromedia Flash content. In most cases, the biggest challenge for designers and developers is deciding when to use text equivalents and what they should say. A second general issue for Macromedia Flash designers and developers is the use of animated elements. Screen readers are designed to work best with web content that changes based on user commands such as a mouse click or a button press that causes a new page to load. Macromedia Flash content operates on an entirely different model. Macromedia Flash movies may change constantly without requiring the page to refresh. Consequently, designers and developers should be mindful of how a Macromedia Flash movie will work with a screen reader. For more information on 3
managing animated elements in a Macromedia Flash movie, see the document "Creating Accessible Content in Macromedia Flash MX: Animation." The third issue is the control of tab order in Macromedia Flash content. Designers and developers need to consider how screen readers will move through the contents of a Macromedia Flash movie. The order in which screen readers perceive Macromedia Flash content may be controlled through careful placement on the stage or through the use of ActionScript. For more information about custom tab orders, see the document "Creating Accessible Content in Macromedia Flash MX: Accessibility and ActionScript." This document explains when and how to use the Accessibility panel in Macromedia Flash MX to add text equivalents to elements of a Macromedia Flas h movie. This document discusses the following topics: Understanding text in Macromedia Flash Player 6 Adding text equivalents in Macromedia Flash MX Adding text equivalents for other accessible elements of a Macromedia Flash movie By default, Macromedia Flash Player 6 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 shown here was created by adding text to the stage. A screen reader might read this banner as "Trio Motor Company." Text is read by default; therefore, the designer or developer would not need to make any changes to this movie to make it accessible to screen readers. Keep in mind that not all assistive technologies handle MSAA data in the same way. There may be slight differences from one tool to another and from one screen reader to another. Now take a look at another example of text that requires a text equivalent. In the following example, the Macromedia Flash MX logo is displayed. The letter f in the logo is not actually text, but a graphic that is part of the design as a whole. 4
Since the letter f is not text, a screen reader will not read it. Moreover, the letter f alone does not provide enough information about the banner for screen reader users. In this case, a text equivalent should be provided. To add a text equivalent, use the Accessibility panel. First, make sure that 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 F9. 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 not important because Window-Eyes reads the information in both fields 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 preceding example, a literal description might read, "Red circle with letter f in white." This may not be particularly helpful 5
information to a screen reader user, however. By contrast, the phrase "Macromedia Flash MX" would 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 or developer may choose not to use a name, but only a description of the object. By default, Macromedia Flash MX can make text, input text fields, buttons, movie clips, and even entire movies accessible. While text elements do not require modification by the designer or developer, other elements do. Designers and developers can use the Accessibility panel in Macromedia Flash MX to add a text equivalent or even to hide elements from assistive technologies. In the preceding example, the logo has a letter f inside of a dark rectangle. If the letter were a text element, it would be read after the name of the logo. In this case, the screen reader would likely read, "Macromedia Flash MX, F." To prevent this, select the logo and deselect the option that reads, "Make Child Objects Accessible." This action tells the screen reader not to look inside of the Macromedia Flash logo for other elements. Now the screen reader will read, "Mac romedia Flash MX." Determining when not to make an object or child objects accessible can be a complex decision. It is not always necessary or helpful to make all elements of a movie accessible. Consider the following example: an animation of an electric car engine running. 6
Since the relationships displayed here are inherently visual, it will not be helpful to provide names for the parts of the engine. Instead, the designer or developer may provide a single text equivalent for the entire animation that describes what is being displayed. In the Accessibility panel, deselect all elements on the stage. Make sure that the Make Movie Accessible option is available and selected. Deselect the Make Child Objects Accessible option, and enter a description for the animation. 7
Animation Macromedia Flash MX provides a powerful set of tools for creating animations and interactive content and applications. These tools allow designers and developers to create demonstrations of complex visual relationships, engaging interactions in buttons and movies, and attractive interfaces in websites and web applications. Most assistive technologies, however, are not designed with these types of animations in mind. While working in Macromedia Flash MX, designers and developers need to be mindful of the ways in which assistive technologies such as screen readers will interact with their movies. This brief document discusses the following topics related to optimization of accessibility when creating animation: Understanding how assistive technologies handle animation Providing text equivalents for entire movies Avoiding animation within buttons When a screen reader encounters a piece of Macromedia Flash content, the screen reader loads the current state of the movie and notifies the user. With the Window-Eyes screen reader, the user hears "Loading load done." Once a piece of content has been read, the screen reader moves on to read other parts of the Macromedia Flash content and the rest of the page. A unique feature of Macromedia Flash content is that it may change over time. As the content changes, Macromedia Flash Player 6 sends a signal to the screen reader notifying it that there has been a change. When the screen reader receives this notification, it automatically returns to the top of the page and begins reading it again. The following example illustrates the serious implications of Macromedia Flash content created without consideration for users of screen readers. A poorly designed banner ad placed at the top of the page might loop constantly through a few frames. When Macromedia Flash Player encounters this banner, it will send repeated notifications to the screen reader of changes in the content, and the screen reader will continually return to the top of the page. This problem can seriously erode the experience for screen reader users. To address this specific issue, Macromedia worked with GW Micro to create a "halt Macromedia Flash events" key combination (Alt+Shift+M) for the Window-Eyes screen reader. This key combination allows a screen reader user to suspend Macromedia Flash notifications on the page. Pressing the key combination again allows the user to resume Macromedia Flash notifications. A better solution for the handling of animation is simply to hide the animation from assistive technologies. Macromedia Flash MX allows designers and developers to assign a text equivalent for an entire movie or for a collection of objects within a movie. Designers and developers might choose to provide a text equivalent for Macromedia Flash content for two reasons. First, animations are often used to illustrate visual relationships among elements on the screen. Adding text equivalents of the individual elements may not provide sufficient description of the relationships among the elements. For example, in an animation of the solar system, a designer or developer might add text equivalents for the planets; however, these text equivalents would not 8
convey information about how the planets move in relation to one another. A text equivalent for the entire movie could provide a better description of this relationship. Second, text equivalents may be used to hide animated content from the screen reader. In the example of a rotating banner ad, a single text equivalent for the entire ad would convey the content of the advertisement to the user and prevent the screen reader from constantly returning to the top of the page. Designers and developers should refrain from using animated movie clips or other animations within button symbols in Macromedia Flash MX. The use of such animations makes it difficult for screen readers and other assistive technologies to work with buttons. 9
Buttons and Forms Macromedia Flash MX is the most powerful tool available for the development of accessible rich media. One important use of Macromedia Flash MX is the creation of interactive applications that allow users to click, drag, and type within a movie. Making an application accessible means enabling users not only to access the content, but to operate the controls as well. By ensuring that the buttons and form fields are accessible, Macromedia Flash MX designers and developers can make the best experience on the web available to all. This document discusses the following accessibility issues related to the use of buttons and form objects in Macromedia Flash MX: Understanding buttons and forms in Macromedia Flash Player 6 Using autolabeling in Macromedia Flash MX Using the Down state in buttons Providing keyboard shortcuts Creating accessible forms By default, Macromedia Flash Player makes buttons available to assistive technology. For example, with the Window-Eyes screen reader, the sample button shown here is read as follows: First, the word button is read to provide a cue to the user that an action is associated with this element. Next, the text equivalent is read to the user in this case, the word home. Finally, the user can activate this button by pressing Enter on the keyboard. As with buttons, Window-Eyes users are also notified of form fields. For instance, in the following example, the screen reader might read, "Electronic Registration. Edit Box: Name. Edit Box: Address. Button: Send." In both of the preceding examples, the developer does not have to specify the name and description in the Accessibility panel. Macromedia Flash MX uses its autolabeling feature to generate the labels automatically. It looks for a text label placed on top of, inside, or near a button or text field. When Macromedia Flash Player discovers an arrangement like this, it assumes that the text object is a label for the button or text field. 10
In some cases, it may be desirable to specify a text equivalent that is different from the text label. This may be appropriate when a button or form uses a short text label, or when the label is split up or placed away from the button or form object. In the following example, notice that the name fields are grouped visually. Putting the word name at the top implies that the labels first and last signify "first name" and "last name." When using assistive technology, this relationship may not be obvious. To clarify these labels, the text equivalents "first name" and "last name" may be specified using the Accessibility panel. In this case, the text labels should be hidden from the assistive technology. Assistive technologies might otherwise read the text label and the text equivalent as, "Name. First. Edit Box: First Name." If the designer or developer converts the text objects to a movie symbol and then deselects the Make Object Accessible option, the assistive technology will read only the text equivalent. The screen reader would then read, "Edit Box: First Name." In Macromedia Flash MX, designers and developers can create buttons with animation and scripting to build complex interactions; however, screen readers and other assistive technologies generally work best with buttons that are relatively simple. One common technique is to place text and graphics in the Down state of a button in Macromedia Flash MX; when the button is clicked, the text and graphics are revealed. Assistive technologies, 11
however, do not always explore the contents of the Down state, with the exception that the assistive technology may look for a single text element to use as a label. Navigational cues, menu bars, and other content associated with the Down state are not made available to assistive technologies. Another common technique among Macromedia Flash designers and developers is the use of invisible buttons placed over a background with text. This practice is strongly discouraged for accessibility purposes. Macromedia Flash Player notices only buttons that have content; thus, invisible buttons are not made available to assistive technologies. The keyboard shortcut field on the Accessibility panel allows designers and developers to add keystrokes to individual buttons and form elements. To provide a keyboard shortcut, the ActionScript Key object must be used to detect key presses by the user during movie playback. For more information, see "Capturing key presses" in Macromedia Flash Help. Keyboard shortcut functionality also depends on the assistive technology and software used. For keyboard shortcuts, use the following conventions: Spell out key names, such as Ctrl or Alt, rather than using symbols, such as a downwardfacing arrow for the Down Arrow key. Use capital letters for alphabetic characters. Use a plus sign (+) between key names, with no spaces for example, Ctrl+A. Macromedia Flash MX allows designers and developers to create accessible forms to build dynamic web applications. The simple form components, such as input text, radio buttons, check boxes, and component buttons, work with assistive technologies; however, more complex objects such as the scroll bar, the combo box, and the list box do not work with assistive technologies. 12