Go to previous article
Go to next article
Return to 2004 Table of Contents
Senior Product Manager for Accessibility
4110 Birch Street
Madison, WI 53711
Phone: (608) 238-6747
This paper provides the ongoing results of two years of research looking at guidelines for creating accessible Macromedia Flash content. These guidelines are not intended to be comprehensive. Instead, they are intended to provide designers with a starting point for accessible Macromedia Flash design. This paper will present and explain the following guidelines:
Provide Text Equivalents
By default, Macromedia Flash Player 7 exposes all text elements to screen readers. The screen reader can read all static text and dynamic text symbols on the stage. Designers and developers do not need to make any modifications. For example, the simple Macromedia Flash banner below was created by adding text to the stage.
Movie clips and buttons are also exposed to the screen reader; however, screen readers are not able to view the contents of a picture and describe them for the user. Instead, the designer must assign a text equivalent for graphic elements.
In the example below, 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.
Because 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 to be helpful 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 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 Ctrl +f2.
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 as the Window-Eyes screen reader reads both by default.
Text Equivalents for Animation
A basic feature of Macromedia Flash content is that it may change over time. As the content changes, Macromedia Flash Player 7 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 implications of this, particularly with looping animations, can be serious.
To address this issue, the design may 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. To do this, designers simply use the Accessibility panel to assign a name and description for the object and deselect, the 'Make Child Objects Accessible' option. In this case, screen reader will read only name and description will avoiding unnecessary looping.
At its inception, Macromedia Flash was first and foremost a tool for animation. While the uses of Flash have since become quite varied, it is still quite common for elements of a Flash movie to be animated. There are at least three issues to keep in mind when working with animations in Macromedia Flash movies.
First, screen readers are not able to distinguish between changes to the screen that are initiated by the user and those that are not. A simple animation on screen can be interpreted as a continuous stream of user events. This will cause some screen readers to constantly return to the top of the page to read the entire page again. Take the simple example shown below. It shows a frame from an animation of a moon orbiting a planet.
To prevent the movement on the screen from sending numerous or constant repetitive events to the screen reader, the designer should deselect the option to make child objects accessible for all movie clips that contain animation. This will not only prevent the movie clip from sending events to the screen reader, but it will also serve to formally group the contents of the movie. This will facilitate machine testing of the movie for use of text equivalents.
Second, animated elements that display constant motion can serve as a distraction for people with certain cognitive disabilities. It is important that if the end user is expected to read any text on the screen that all motion on the page halt after a moment or two. It is acceptable to have motion on the screen, but the screen must 'settle' if the user is expected to read any content on the page.
Third, designers should avoid the use of blinking elements in their Flash movies. Elements that blink within a certain range can trigger photo-sensitive epilepsy in some people. Given that the rate of blinking is difficult if not impossible to predict, it is best ot avoid the use of blinking elements altogether.
Unlike HTML, Flash content has no heading elements to help users discern the structure of a page or site. Instead, designers should use the description field on the accessibility panel to introduce and explain both the purpose of the screen and its layout.
In the example below, a simple registration form has been created in Macromedia Flash MX 2004. This form includes seven form fields and a Submit button.
It is possible to add or modify the accessible name and description for the entire movie by going to the _root timeline, and deselecting all options. The Accessibility window should change to indicate that only the name and the description can be modified.
In this case, the designer might enter the following as a description for the form: "This form is used to request information via mail."
A second issue with Flash content is that visual cues built into navigation elements and other types of controls within a Flash movie are not always evident to a screen reader user. Thus it is important for designers to provide a means to make changes in navigation elements or control evident to a screen reader user. For example, the screen shot below shows a Flash movie that uses tab metaphor to expose what part of the site the user is in. Changes to the tabs reflect a change in the area of the site. However, this cue is not available to the blind user. The solution in this case is to place a simple text field under than banner that is updated as the user visits other areas of the site.
Ensuring Keyboard Access
Content designed in Macromedia Flash MX 2004 should work as well for users who rely on the keyboard as for those who use the mouse. Many users with disabilities who are not able to use a mouse will rely on the keyboard or a modified keyboard to interact with controls. In addition, keyboard access to controls is also important for users who are blind. If one cannot see the cursor on the screen, using the mouse often proves impossible.
Buttons and Forms in Macromedia Flash Player 7
By default, the Macromedia Flash Player makes buttons available to assistive technology. With a screen reader, the sample button below would be read as follows. First, the word 'button' is read to provide a cue to the user that there is an action associated with this element. Next, the text equivalent is read to the user-in this case, the word "home." Finally, the user may activate this button by pressing Enter on the keyboard.
As with buttons, Window-Eyes users are also notified of form fields. In the example below, the screen reader might read, "Electronic Registration. Edit Box: Name. Edit Box: Address. Button: Send."
It should be noted that it is common among Flash designers to use movie clip symbols as 'buttons' on the stage. In these instances, it is very important that the designers use remote ActionScript, where the script is attached to a frame rather than to the movie instance itself. Otherwise, the screen reader will not recognize the element as a button.
Using the Down State in Buttons
In Macromedia Flash MX 2004, designers and developers are able to 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 2004. When the button is pressed, the text and graphics are revealed. The Macromedia Flash Player does not expose the contents of the down state, except for a single text element. Navigational cues, menu bars, and other content are not made available using this technique.
Another common technique among Macromedia Flash designers and developers is the use of invisible buttons placed over a background with text. This practice is discouraged for accessibility purposes. The Macromedia Flash Player notices only buttons that have content; thus, invisible buttons are not made available to assistive technologies.
Notes on Keyboard Shortcuts
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, ActionScript must be used to detect keypresses by the user during movie playback. (For more information, see "Capturing keypresses" in Macromedia Flash Help.) Keyboard shortcut functionality also depends on the assistive technology and software used.
For keyboard shortcuts, use the following conventions:
Controlling Reading Order
Designers and developers need to consider how screen readers will move through the contents of a Macromedia Flash movie. The default reading order of Macromedia Flash content, instead of moving in an orderly fashion from left to right and top to bottom, might be unpredictable.
This problem may be addressed in one of two ways. First, using simple trial and error, a designer may use a screen reader to listen to the contents and adjust the placement on the stage until the content is read in a sensible order. This method works well with movies that use a small stage size. The larger the stage, the more complex the reading order becomes.
A more precise method for controlling the reading order uses ActionScript. A custom tab order for content within a Macromedia Flash movie may be specified using ActionScript. Tab order can be assigned to dynamic text objects, buttons, movie clips, and input text fields.
Adding captions or subtitles to a Macromedia Flash movie provides access to audio content for people who are deaf or hard of hearing. With the added support for video within Macromedia Flash MX 2004, the need for captions in online multimedia is significantly greater than it was in previous versions of Macromedia Flash. At the same time, the improved support for XML in Macromedia Flash MX allows designers new and easier ways of providing captions. For more information on captioning in Flash, see: http://ncam.wgbh.org/webaccess/magpie/magpie2_captioner.html
Use Color Wisely
As with any web content or application, it is important that Flash follow guidelines for the use of color established under W3C guidelines. Specifically, this means that Flash content should not use color as the sole means of conveying information. In addition, this means that Flash designers should ensure that there is sufficient contrast between foreground and background colors to ensure readability of the page.
Accessibility: Macromedia Flash MX Features (n.d.) Retrieved September 30, 2002 from Macromedia Accessibility Resource Center website. http://www.macromedia.com/macromedia/accessibility/features/flash/.
Heins, J. & Regan, R. (2002) Building Standards Conformant, Accessible Learning Objects with Macromedia Flash MX. Retrieved from http://download.macromedia.com/pub/solutions/downloads/accessibility/fl_learning_obj.pdf.
Regan, R. (2002) Accessibility and Macromedia Flash in Thatcher, Regan et al Constructing Accessible Web Sites. Birmingham, UK: Glasshaus.
Regan, R., Kirkpatrick, A., & Pinch, P. (2002) Think Accessibility in MacGregor, C. et al The Flash Usability Guide: Interacting with Flash MX. Birmingham, UK: Friends of Ed.
Section 508 Standards (n.d.) Retrieved September 30, 2002 from Section 508 website. http://www.section508.gov/index.cfm?FuseAction=Content&ID=12.
User Agent Accessibility Guidelines 1.0 (August, 2002) Retrieved September 30, 2002 from W3C website. http://www.w3.org/TR/UAAG10/.
Web Content Accessibility Guidelines 1.0 (May, 1999) Retrieved September 30, 2002 from W3C website. http://www.w3.org/TR/WCAG10/.
Go to previous article
Go to next article
Return to 2004 Table of Contents
Return to Table of Proceedings