Best Practices for Accessible Flash Design: Part 2 | WebReference

Best Practices for Accessible Flash Design: Part 2

current pageTo page 2To page 3

Best Practices for Accessible Flash Design: Part 2

By Bob Regan

Controlling reading order using off stage content

In cases where the application relies on a highly dynamic content, it can be difficult to specify the reading order in advance. In this very small set of applications, it is possible to control the reading order by placing a second set of content off stage in a single column. The on stage content is all rendered as inaccessible to prevent the screen reader from reading it. The second set of content is positioned in a column so the reading order does not jump between unrelated elements.

There are two primary drawbacks to this method. First, it increases the number of objects in the movie, impacting the file size and performance of the movie. Second, users of screen magnifiers may find the off stage content conflicts with the on stage visual content they are working with. Screen magnifiers not only increase the size of elements on the stage, but move them to the center. If the on-stage content is inaccessible, off stage content will draw the focus of the screen magnifier creating a very confusing experience visually. This method is often used in conjunction with screen reader detection, but it is important to consider that users may have both a screen reader and magnifier in use simultaneously.

Screen reader detection

Since this case is intended to benefit screen reader users alone, this method is frequently used in conjunction with screen reader detection. Flash has a unique advantage over JavaScript in that it is able to use MSAA to detect the presence of a screen reader. The method Accessibility.isActive() will return a value of true if a screen reader is present and it is currently focused on the Flash content. It is important that this method not be called in the first second or so in the life of the movie, or it could return a false negative. Rather than calling this method in the first frame of a movie, many designers will attach this method to the first button in the movie.

Building off stage content

If Accessibility.isActive() returns a value of true, the contents on screen are set to be inaccessible. Perhaps the easiest means of accomplishing this is to place all of the on stage content in a single movie clip and then set the .silent property of that movie clip to true. It is preferable to use .silent as opposed to altering the visibility of the movie clip since people relying on screen readers might be working together with a sighted person relying on the on stage content visually.

Next, the off stage content is loaded into a single column. This column need not match the height of the movie. It is important that as changes are made on stage that the off stage content is updated at the same time.

Control Animation

While Flash is now much more than an animation tool, it is still commonly used to create and deliver animations for a variety of purposes. There are three key issues to consider when using animations in Flash.

Hide Child Objects

As mentioned earlier, constant changes to the screen can cause a screen reader to refresh constantly. This can be very frustrating to screen reader users when they are trying to read through content and the screen reader is repeatedly returning to the top of the screen. To prevent constant screen reader refreshes, hide the child objects of the movie clips that contain animation. This can be accomplished via the Accessibility panel by deselecting the "Make Child Objects Accessible." Using ActionScript, the .forcesimple property should be set to true.

Settle Motion

Avoid constant motion on the screen when the user is expected to read text on the screen. For users with certain learning and cognitive disabilities, it can be a powerful distraction when the screen is moving. It is acceptable to use motion together with text, but the screen must settle after a moment or two.

Avoid Blinking

It is very important that Flash movies avoid blinking for more than a second across a large viewable area of the screen. Photo-sensitive epilepsy can be triggered by blinking at specific rates if viewed at close quarters across a significant portion of one's field of vision. There is no way to predict a flicker rate precisely given it is dependent on the end users machine. Subsequently, it is important to avoid flicker completely.

Provide Context

Screen readers are not able to provide many cues to a screen reader user about the layout or structure of a Flash movie. As a result, it is important that complex movies provide a description and alert the user when controls have multiple states. There is no way to provide a set means for determining when a movie is sufficiently complex to merit a description or when a control requires additional cues. It will be up to each designer to make these determinations.

Provide a description

In cases where a movie contains several controls, it is important to provide the end user with a short description of the purpose of the movie, the controls contained within it, and a list of keyboard shortcuts used. In addition, it is helpful to provide the user with instructions on where to receive additional information or how to contact support.

This can be accomplished in a number of ways. First, this information may be placed on a separate screen in the Flash movie or a separate HTML page. It is recommended that in this case, a link to the information screen be placed at the top of the page in a button titled "Site Info." Using this short title will help prevent the application from becoming overly verbose. This button can be hidden if desired, but to enable sighted users with disabilities to access the same information, it is recommended that a second link to the same information be placed elsewhere on the screen (likely at the bottom).

Expose state

Flash allows designers to create an infinite variety of controls. In cases where the user is provided visual cues about the state of a control or a screen within the movie, this information should also be made available via a dynamic text field that is updated as the control is activated.

Take the example below. In this case, the movie uses tabs that drop down to indicate which screen is the active screen. While this is a helpful visual cue, this information is not available to screen reader users.

To provide a cue for the screen reader user, a text field is hidden under the banner. Since it is intended to provide information for screen reader users, it need not be visible. As the user moves between screens, the contents of this field reflect the active screen.

current pageTo page 2To page 3

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