By Thea Eaton
 
Created
9 February 2010
 

Requirements

 
Prerequisite knowledge

This article assumes you have a working knowledge of Flash CS4 Professional and a basic understanding of ActionScript 2 or 3. Experience with accessibility development is not required.
 

 
User level

Beginning
 

 
Required products

Since the publication of the animated presentation CreatingAccessible Sites in Flash for the Adobe Accessibility Resource Center,we've been thrilled to see an overwhelming response from people requesting moredetails about the presentation itself and how it was made. In this article, Idiscuss some of the necessary steps to take when making a SWF-basedpresentation accessible. I also provide you with a behind-the-scenes look andshare some code examples that we used to make this presentation (see Figure 1).
 
The Creating Accessible Sites in Flash presentation
Figure 1. The Creating Accessible Sites in Flash presentation

 
Optimizing accessibility for visually impaired users

When you develop accessible Flash presentations for users with disabilities, you have to devote a fair amount of the work to ensuring that the contents of your SWF file can be read by screen reader software. We implemented the following accessibility features.
 
 
Reading order
Browsers enabled with MSAA (Microsoft Active Accessibility) software allow screen reader software to reach inside the presentation and pull out its contents. The screen reader scans the SWF file from the top left-hand side of the Stage and pulls out all the elements it finds, including text fields, buttons, and movie clips. This is called the reading order, but contrary to its name it does not always result in a logical left-to-right order. You can change this by using ActionScript and setting the tab index property of all the elements that you want the user to access. The code to implement this is simple, and it is the same syntax in ActionScript 2 and 3:
 
access_txt.tabIndex = 1; header.title_txt.tabIndex = 2; header.logo_mc.tabIndex = 3;
You can leave gaps in the tab index numbers. This can be a useful strategy that allows you to leave space for items that you might want to insert later, like an expanding menu.
 
When you test the reading order with a screen reader, there might be elements that read out that you prefer to hide. For this presentation, we hid the text field named slideNum_txt, which indicated the current slide number 1/5 at the bottom next to the breadcrumb navigation. The screen reader read this text out as "1 slash 5."
 
To change this, we added another hidden text field behind the breadcrumb navigation and populated the field with the text "Part 1 out of 5" for a friendlier readout. We included this hidden text field in the tab index instead. Remember that although some items are not included in the tab index, they may still be read out by the screen reader at the end.
 
You can use the following code to remove elements from the reading order:
 
 
ActionScript 2
 
 
slideNum_txt._accProps = new Object(); slideNum_txt._accProps.silent = true;
 
ActionScript 3
 
 
var accessProps:AccessibilityProperties = new AccessibilityProperties(); accessProps.silent = true; slideNum_txt.accessibilityProperties = accessProps;

 
Adding a welcome message for screen readers

At the time of this writing, there are not many accessible SWF-based presentations on the web yet. For this reason, it is helpful to add a screen reader welcome message to your presentation, which reassures screen reader users that the SWF file is fully accessible. The message can also include other important information that is available to sighted users at a glance, such as the page structure or the availability of keyboard shortcuts. You can place the message text in a text field that is hidden behind the background or the page's header.
 
For this presentation, we added the following message:
 
Welcome to this accessible presentation, Creating Accessible Sites in Flash. Press D to turn on the audio descriptions. Press P to pause and play the presentation. Press F to skip forward, press B to skip backward. Some screen readers may require you to disable quick navigation keys before you will be able to use the keyboard shortcuts. Use the Up and Down arrow keys to navigate, and press Enter or the Space bar to select the buttons.
 
Be sure to give this welcome message a tab index number of 1 so that it is the first thing that the screen reader reads (see Figure 2).
 
Screen reader welcome message text hidden behind the black header bar
Figure 2. Screen reader welcome message text hidden behind the black header bar

 
Updating buttons with text equivalents

In Flash, you can use ActionScript to add text equivalents to buttons and movie clips. If a button or movie clip is left without a text equivalent, the screen reader will read "button" or "graphic" without any description. Therefore, it is crucial to assign text equivalents to all buttons and movie clips. You can add text equivalents with the following ActionScript code:
 
 
ActionScript 2
 
 
next_btn._accProps = new Object(); next_btn._accProps.name = "Next";
 
ActionScript 3
 
 
var accessProps:AccessibilityProperties = new AccessibilityProperties(); accessProps.name = "Next"; next_btn.accessibilityProperties = accessProps;
When working with toggle buttons, such as the play/pause button and the audio description's on/off button, it is also important to expose the state of these buttons. We used the description attribute to do this:
 
ad_btn._accProps = new Object(); ad_btn._accProps.name = "Audio Descriptions On,Off"; ad_btn._accProps.description = "Audio Descriptions are off";
Once you change the description on the toggle buttons inside their handlers, always call the Accessibility.updateProperties(); method to update the attributes.
 
Additionally, it is critical to add descriptions for all of the images, even those that are not directly relevant but set the mood or add to the atmosphere of the presentation. We could have skipped adding the description of Mr. Accessible in this presentation, but by adding a text equivalent to describe the illustration, we enhanced the experience for the user:
 
mraccess_mc._accProps = new Object(); mraccess_mc._accProps.name = "An illustrated presenter is standing on the left side of the screen. He wears round glasses, a black suit and a red tie.";
It's fine to add color descriptions to text equivalents. We usually also indicate to the user whether an image is an illustration, animation, or digital photo
 

 
Incorporating audio descriptions into site navigation

Some videos and presentations include animated slide content that is separate from the voice track. It is important to describe this animated content to visually impaired users. Unlike captions, the audio descriptions are often left out. In this presentation, we added audio descriptions in between sections of the slides.
 
The audio descriptions button in the navigation bar sets a toggle value. When set to true, the audio description plays in the Timeline. When set to false, the playhead skips it. We also added a sound effect to this toggle button, making it audible when audio descriptions are enabled (see Figure 3).
 
Audio descriptions read by a female voice to contrast with the male presentation voice
Figure 3. Audio descriptions read by a female voice to contrast with the male presentation voice
Note: The difference in the two voices helps visually impaired users make the distinction between the presentation and the description narrations.
 
In situations where you are unable to split up the voice track in a presentation, you can also add a descriptive text equivalent. In this scenario, you could take the voice track and insert the descriptions in between the appropriate lines. The descriptions can be incorporated as a separate text file or in a hidden text field at the end of the presentation.
 

 
Tips to providing better experiences for all users

This section provides some suggested best practices that can help you achieve your project's accessibility goals. In many cases, minor changes to the code and updates to the navigation items can make a significant difference in how the content is displayed and how well it can be accessed.
 
 
Using the MovieClipLoader method instead of LoadMovie
Depending on the nature of your presentation, you might use the LoadMovie method to load in different parts of the presentation. It is important to remember that if you have any text equivalents assigned to the loader movie clip, any text equivalents assigned to this movie clip are erased when it loads. For this reason, it is a best practice to always use the newer MovieClipLoader method.
 
For example, rather than using this syntax to load a SWF file:
 
holder_mc.loadMovie("external.swf");
Use this code instead:
 
var mcListener:Object = new Object(); mclListener.onLoadComplete = function() { // assign alt text here when finished loading } var loader:MovieClipLoader = new MovieClipLoader(); loader.addListener(mclListener); Loader.loadClip("external.swf", holder_mc);
In this presentation, we chose to make the contents of the holder movie clip inaccessible until the last slide, which contains links and other information. All of the slide information is voiced in the audio descriptions, and we did not want any conflicting text fields to be read by the screen reader. We used the forceSimple attribute to make the screen reader ignore the contents of the slides by setting it to true. On the last slide we set it to false. Here's an example of the code:
 
holder_mc._accProps = new Object(); holder_mc._accProps.forceSimple = true;
In the last slides of Part 5 of the presentation, we switched the forceSimple attribute back to false. We also added tab indices to the elements in this slide that continued on from the last tab index of the main shell. This approach allows the screen reader to access the content of the last slide and read out the final resource information.
 
 
HTML links in Flash text fields
In Flash, you can add an HTML link by selecting part or all of the text in a dynamic text field and adding the desired path. A screen reader, however, cannot understand these types of text links. To make them accessible, create separate buttons for each of these text links. If the text is part of a CSS-formatted text field, then you can also add separate hidden buttons at the end of the text that are accessible by a screen reader, while leaving the text links inside the text of the presentation (see Figure 4).
 
HTML links added as separate buttons in the presentation rather than using inline text links
Figure 4. HTML links added as separate buttons in the presentation rather than using inline text links
 
Using the right-click menu to zoom
Not all visually impaired users use screen readers to access web content; many low vision users use a screen magnifier. For this reason, it is important not to disable the right-click zoom menu feature because this allows users to natively zoom in and out of the SWF content.
 
Use the following code example to customize the right-click menu of your presentation. This code allows you to add your web address and copyright information to the menu, as well as hiding all other functions except for the zoom features:
 
 
ActionScript 3
 
 
var customMenu:ContextMenu = new ContextMenu(); customMenu.builtInItems.forwardAndBack = false; customMenu.builtInItems.loop = false; customMenu.builtInItems.play = false; customMenu.builtInItems.print = false; customMenu.builtInItems.quality = false; customMenu.builtInItems.rewind = false; customMenu.builtInItems.save = false; customMenu.builtInItems.zoom = true; var copyright = new ContextMenuItem("©2009 DoodleDoo"); copyright.enabled = false; customMenu.customItems.push(copyright); var sitelink = new ContextMenuItem("www.doodledoo.com"); customMenu.customItems.push(sitelink); sitelink.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, openSite); contextMenu = customMenu; function openSite(e:ContextMenuEvent):void{ navigateToURL(new URLRequest("http://www.doodledoo.com")); }
After adding this code, right-click the SWF content in a browser to see the changes to the Flash Player menu displayed (see Figure 5).
 
Zoom features are enabled in the right-click menu
Figure 5. Zoom features are enabled in the right-click menu
Note: Although it is optional, it is a best practice to customize the menu by adding a copyright statement and a link to your site.
 

 
Considerations for mobility-impaired users

Mobility-impaired users might not be able to use the mouse to access your SWF presentation. All elements should be set to interact with the Tab key and be selected when the user presses the Enter key (Windows) or the Return key (Mac OS). When you tab through a presentation, all the movie clips are automatically highlighted with a yellow focus rectangle. You can use the tab index property to specify the order in which the elements in your presentation receive focus. The Focus Manager class allows you to handle the keyboard focus.
 
 
Working with tab order and tab-enabled movie clips
At this point, you've already assigned the tab index numbers when programming the reading order for the screen reader. When tabbing, the same order is followed, except you cannot tab to a text field. You might also notice that while you can use Tab to highlight movie clips, many of the movie clips are not used as buttons. If these movie clips are not selectable to access links, there is no need for them to be in the tab order. You can remove them from the tab order by using the following code:
 
instance_mc.tabenabled = false;
In the "Creating Accessible Sites in Flash" presentation, we took two items out of the tab order: the Adobe logo and the animated character. Notice that these items are still included in the reading order for the screen reader (see Figure 6).
 
Users can tab to movie clips that have been given a tab index
Figure 6. Users can tab to movie clips that have been given a tab index
Note: If these movie clips are not buttons, it is a best practice to take them out of the tab order.
 
 
Adding keyboard shortcuts to facilitate navigation
A presentation is considered functionally keyboard-accessible as long as the user can press Tab to access all the selectable elements. However, you can go a bit further by adding keyboard shortcuts to provide easier access to commonly used buttons in your presentation. Add the following code to program a keyboard shortcut:
 
 
ActionScript 2
 
 
instance_btn.onRelease = function() { // button code } // keyboard shortcut for button function down( ) { // trace(Key.getCode()); // keyboard key 'A' if (x = Key.isDown(65)) { Selection.setFocus(instance_btn); // button code } delete this.onKeyDown; this.onKeyUp = up; } function up( ) { this.onKeyUp = undefined; this.onKeyDown = down; } var keyListener:Object = new Object( ); keyListener.onKeyDown = down; Key.addListener(keyListener);
Notice that Selection.setFocus() is used to draw the yellow rectangle around the button that corresponds to the keyboard shortcut. This behavior shows the user which button has been activated by the keyboard shortcut that was pressed.
 
The number 65 in the code sample above is the ASCII number that specifies the A key on the keyboard. You can use the trace statement Key.getCode() to find out which ASCII number belongs to each keyboard key. Choose Control > Test Movie and press any key on the keyboard; the Key.getCode() method displays the corresponding ASCII number in the Output panel.
 
Once you have programmed the shortcuts, you can add a keypress overlay to show users which keyboard shortcuts are available. For the purposes of this presentation, we added a button to the navigation bar with a keyboard symbol on it. When the user clicks the button, a keypress overlay displays all of the available shortcuts. The keyboard shortcut hints are located directly above each button (see Figure 7).
 
Keypress overlay illustrating the available keyboard shortcuts
Figure 7. Keypress overlay illustrating the available keyboard shortcuts
We used the shortcut "P" for the play/pause button, the shortcut "A" for the keypress overlay also known as "access keys" , the "C" for captions, and the "D" for audio descriptions.
 
We recommend using mnemonic, single-letter keys for keyboard shortcuts because they are easy to press and easy for the user to remember. When using combination shortcuts, such as Alt+key, make sure to make them "sticky." Mobility-impaired users who utilize a switch device or a head pointer may have difficulty pressing several keys at once. With sticky shortcuts, the first key that is pressed such as the modifier key Alt or Control remains active until the second key is pressed.
 
 
Maintaining focus programmatically
You can also use the Selection.setFocus method to maintain focus in your presentation. This means that while the user presses the Tab key, the focus stays within the SWF presentation at all times. Focus can get lost when the last button the user presses disappears. When that happens, the user might have to start tabbing from the top of the HTML page again in order to get back into the presentation. To avoid this, you can program the focus by using Selection.setFocus and redirect the focus to another button in the presentation.
 
It is also important to maintain focus on toggle buttons, such as play/pause buttons. If you are using two separate buttons that overlap, for play and pause as an example, make sure to redirect the focus from one button to the other button when Tab is pressed.
 
Make sure to use Selection.setFocus only when the user is tabbing through the presentation; otherwise the yellow focus rectangle will appear for users who navigate through the presentation with their mouse as well. You can detect whether or not the user is tabbing by using the following code:
 
 
ActionScript 2
 
 
var tabON = false; function down( ) { ... // check to see if the user is tabbing if (x = Key.isDown(Key.TAB)) { tabON = true; } ... // check to see if the mouse is moved onMouseMove = function () { tabON = false; }
Note: You can also put this code within the keyboard shortcuts section to scan for instances when the user presses the Tab key.
 
 
ActionScript 3
 
 
stage.addEventListener(KeyboardEvent.KEY_DOWN, checkTab); stage.addEventListener(MouseEvent.MOUSE_MOVE, checkMouse); // check to see if the user is tabbing public function checkTab(event:KeyboardEvent){ tabON = true; } // check to see if the mouse is moved public function checkMouse(event:MouseEvent){ tabON = false; }

 
Considerations for hearing-impaired users

All audible and relevant audio content should be captioned for users with hearing impairments. We chose to add open captioning, which appears on-screen by default, to our presentation. All visual learners (both those who turned off the audio and those who are hearing-impaired) benefit from seeing captions on the screen.
 
 
Adding captions
We decided to place the captions for this project in the form of a speech bubble. The captions were placed on the Timeline together with the animations. They are enabled by default and can be turned off for users who are not hearing-impaired or for users who are not visual learners, who might be distracted by the on-screen text. Certain users with a cognitive impairment might also have difficulty focusing on the audio when captions are displayed on-screen. The captions button, with the universal symbol CC on it, acts as a toggle button. It alternately hides or shows the speech bubble with the captions inside (see Figures 8 and 9).
 
Presentation with captions enabled
Figure 8. Presentation with captions enabled
Presentation with captions turned off
Figure 9. Presentation with captions turned off
The speaker's on/off button remains on the screen at all times. The different states of this button alert users who are hearing-impaired, and those who have their speakers turned off, that there is audio playing.
 
Adding full, on-screen text benefits hearing-impaired users, and it can also benefit other learners. By giving the user full control over the audio and making the presentation segmented and user-driven, the learning experience is more effective for all different types of users. Visual learners can turn the audio off and read at their own pace, while auditory learners can turn off the captions and listen to the audio while following along with the presentation.
 
Having full, on-screen text can also help all users absorb the content better because they can read it again after a segment has finished playing. Therefore, we recommend making the on-screen text an important part of your e-learning presentations.
 

 
Where to go from here

As with any project, begin by considering your target audience. Imagine the issues that some users may encounter with the content you are providing and brainstorm to find ways to improve the user experience to make your presentation more accessible for everyone.
 
Review the following online resources to research further:
 

 
Acknowledgements

I would like to thank the following people for helping develop the Creating Accessible Sites in Flash presentation: Chris Lensch for the paparazzi snapshots, Lance Myers for giving Mr. Accessible his smooth moves, J. Michael Scott for giving him his voice, Lori Taylor for the behind-the-scenes audio descriptions, and Allison Hoffman for giving us sign-language pointers. We also want to thank all the good folks at Knowbility and the Adobe Accessibility team who sponsored the original presentation and who work hard to eliminate all barriers in IT for users with disabilities.