Best Practices for Accessible Flash Design: Part 2 | 3 | WebReference

Best Practices for Accessible Flash Design: Part 2 | 3

To page 1To page 2current page

Best Practices for Accessible Flash Design: Part 2

Streaming xml caption data

The most flexible and straightforward means of delivering caption data in a Flash movie is to stream caption data at run time. This is possible with both Hi Caption SE from Hi Software and MAGpie from the National Center for Accessible Media. Both create a custom XML file with caption data specifically for Flash. This file strips down xml data included in captioning standards such as SAMI and SAPI for improved performance in the Flash player.

HiCaption SE includes a component that imports this xml file and delivers it via a pre-built closed captioning interface. The designer may modify the look and feel of the icon as well as the text used to deliver the captions. For more information on Hi Caption SE, visit:

For more information about MAGpie visit:

Provide Control Over Audio Playback

Music and audio that plays as the site loads presents a serious challenge to screen reader users. The audio from a Flash movie can interfere with the end users ability to hear the contents of a movie using a screen reader. As a result, it is important to make sure that control over when music is played is provided to the user.

The simplest strategy for handling audio playback is simply to allow the end user to control audio with a play and pause button. Allowing the end user to initiate audio provides the experience of the audio without creating additional hurdles.

A more advanced strategy for controlling playback relies on the use of keyboard shortcuts for audio playback. Providing global keystrokes that allow the user to control the audio can greatly enhance the experience for end users. Here are several controls to consider.

  • Play / Pause

  • Mute

  • Volume

Play and Pause is typically controlled using a single keystroke, such as the letter P, as a toggle. The first time the button is pressed, the audio starts to play. The second time the button is pressed, the audio is paused. A mute button, such as the letter m or the number 0, silences but does not stop the audio. This provides the screen reader user the opportunity to listen to the screen reader temporarily without stopping the audio. Finally, volume controls allow the user to quietly play the audio in the background while still listening to the screen reader. This is most appropriate in cases where the audio does not require the focused attention of the user, as in the case of a music stream.

Use Color Wisely

Given the range of colors available to Flash designers, it is important to emphasize that color selection in Flash content should consider issues for people with color deficits and low vision. This means that color should not be the sole means of providing information. For example, you should never say, "Click on the red button to move forward and the green button to move back." It is acceptable to reference color, but a second indicator should be used at the same time. The same example would be fine if we add a reference to position as well, "Click on the red button on the right to go forward and the green button on the left to go back."

A second issue related to the use of color is to ensure that foreground and background colors have sufficient contrast to ensure readability. One way to think of this is if the application were displayed on a black and white television, would the colors be readable. Colors that lack contrast can make it very, very challenging to read elements on the page.

A very helpful tool in making decisions about the use of color is the Color Doctor from Fujitsu. This free tool simulates grayscale as well as three different types of color blindness. The Color Doctor can be found at:

One major issue to note about the Color Doctor is that it is currently only available in Japanese. Just the same, it is helpful to English speaking designers, even if it takes a little longer to decipher the controls.

Support Users with Low Vision

One of the most complicated situations in accessible Flash design is that of a person with low vision who does not rely on the use of a screen magnifier. Users with moderately to severely low vision rely on the use of a screen magnifier to view content on the screen. Magnifiers, such as Zoom Text from AI Squared, not only make the contents of the screen larger but also move the point of focus to the center of the screen to make working with content easier. Many magnifiers also include functionality that allows users to view content in a variety of contrast modes and include screen reader functionality. Screen magnifiers are based on very similar technologies to screen readers. As a result, content that reads well in a screen reader will also tend to read well with a screen magnifier.

However, many people with low vision do not rely on screen magnifiers but instead use the browser settings to change the font size. The Macromedia Flash Player 7 does not support browser settings for font size. As a result, designers need to take additional steps to support users with low vision. There are two key strategies identified here. First, applications built in Flash should incorporate options that allow users to modify the text size of an application when possible. A simple example, shown below allows the user to globally increase the text size from 12 pts to 18 pts by pressing a button on the home screen of the application.

A second strategy is largely relevant in cases where a Flash movie is opened in a new window. These types of small, focused Flash applications can scale to allow the user to scale the movie as the window grows. This serves as a simple means of allowing the end user to increase the font sizes within the application. The example below shows a movie that scales with the window set to a very (ridiculously) small size.

Now the same movie is shown in a larger window. The text throughout the movie is scaled to fill the available window and to allow the layout to reflow.

About the Author

Bob Regan is a solutions architect for vertical markets at Adobe Systems, Inc., serving as the technical lead for the Education, Government, Financial Services, Manufacturing, Telecommunications and Life Science markets. Bob is also an accessibility advocate with Adobe where he looks at accessibility issues from product design, engineering and content authoring through to the end user.

To page 1To page 2current page

Created: March 27, 2003
evised: July 29, 2006