Go to previous article
Go to next article
Return to 2003 Table of Contents
Senior Product Manager for Accessibility
4110 Birch Street
Madison, WI 53711
Phone: (608) 258-2587
(Note: this will be my address as of October 15, 2002)
This paper provides an initial set of 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 6 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 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 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 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 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, designer 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.
Unlike HTML, Flash MX 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. 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."
Ensure a Coherent 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.
Design for Keyboard Access
Content designed in Macromedia Flash MX 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 6
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, 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. 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:
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, 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 2003 Table of Contents
Return to Table of Proceedings