Creating Accessible Flash Content
Keyboard Accessibility and Reading Order
Article Contents
- Page 1: Creating Accessible Flash Content
- Page 2: Creating Text Equivalents for Flash Content
- Current page: Page 3: Keyboard Accessibility and Reading Order
- Page 4: Flash Accessibility Techniques and Considerations
Keyboard Accessibility
Unless you are using version 7 of the Flash player in Internet Explorer for Windows, when Flash receives the focus within a web page, it maintains that focus. What this means is that once you click in or tab to a Flash movie, you cannot use the keyboard to navigate to other items on the page. The screen readers that support Flash (current versions of JAWS and Window-Eyes) have built in functionality that will change focus back to the web page after all of the Flash items have been accessed. Common browsers with older versions of the Flash player, however, do not have this functionality.
View example of Flash maintaining focus
Those using Mozilla browsers, Netscape 7, or Opera will notice that the Flash content is skipped entirely when navigating with the Tab key (or Q and A keys in Opera). To access the elements within the Flash movie with these browsers, the user must use the mouse to click within the movie. At this point, you will then no longer be able to navigate outside of the Flash movie without using the mouse. This can be an issue for people with motor disabilities that must use the keyboard or certain types of assistive technologies (such as switch devices) for navigation.
You can alleviate this problem by placing the movie in a web page by itself so that there is no need to navigate to other items within the page. If the movie is on a web page with other elements, you could make the movie invisible to the web browser or set all of the buttons in the movie to be inaccessible in the Accessibility panel. However, both of these options make the movie itself inaccessible to the keyboard and should only be used if an HTML alternative is provided or if the movie does not contain important content or functionality.
Users interact with the Flash movie using buttons. Buttons must have equivalent text added in the Accessibility panel or they must have text within them in order for them to be reliably accessible. Often, buttons are set to display content during the "over" or "down" states. The Flash player will only send a single text item to the screen reader from the over or down states of a button. Any additional text items, graphics, or movie clips will be ignored. The over and down states can also be triggered by the keyboard. When the user tabs to a button, the over state is exposed, and when the Space bar or Enter key is pressed, the down state is activated.
Important
When using the keyboard to navigate through Flash, the item that is currently active or has the keyboard focus will display surrounded by a yellow rectangle, called a "focusrect" in Flash. The yellow box will disappear if you move your mouse over top of the Flash movie. This bright yellow rectangle clearly indicates the selected button or form item, but is so unsightly that it is often turned off by developers by setting the _focusrect property to false. If this is done, it is imperative that all buttons have a distinguishable over state so the user can visually distinguish which item currently has the focus within the Flash movie.
Tab and Reading Order
Because Flash is not based on linear code like HTML, the navigation and reading order of items in a Flash movie is determined roughly by their distance from a point somewhere near the upper left hand corner. In some cases, the layout of objects on the stage may cause the reading and tab order to work logically. View example of logical tab order (
). And other times it does not. View example of illogical tab order (). You can test the tab order of items using your keyboard; however, you can only test the reading order of items within your Flash movie with a screen reader. If your movie has a complex layout, you can solve the problem of having to position items based upon that mystical position near the upper left of the movie by using ActionScript to specify a tab and reading order for form, button, text, and movie clip elements inside your Flash movie.
To specify a tab/reading order, two conditions must be met:
- All instances of text within the movie must first be defined as input or dynamic text.
- All symbol instances (occurrences of any symbol) within the movie must be given an instance name.
The first condition introduces problems for most developers, because with input and dynamic text, the font outlines must be included in the .swf file for the text to be anti-aliased and scalable. Embedding the font outlines increases the file size of the Flash movie. The second condition can be quite difficult, as virtually every object on the stage must be selected and given an instance name. This is done by selecting the item on the stage and typing the name into the box on the panel.
Dynamically created elements must be assigned an instance name using ActionScript. If either of these conditions are not met, then Flash will revert to the default reading order. These conditions apply to all elements that are within a movie, even those rendered off-stage and those that are invisible.
If you want to specify the tab order of elements within your movie, you must convert all static text objects to dynamic text object. Now add tabIndex information to a keyframe at frame 1 of your movie:
_root.Homepage.tabIndex = 1
_root.Contact.tabIndex = 2
_root.FirstName.tabIndex = 3
_root.LastName.tabIndex = 4
_root.SubmitButton.tabIndex = 5
If you are using Flash MX 2004 Professional or newer , a tab order option will display within the panel. You can specify the tab order in the panel rather than using ActionScript.
In order for this to work, all text items must be defined as input or dynamic text and you must specify a tab order for every button, movie clip, and text object on the stage that has been set to be accessible in the Accessibility panel.
View an example of incorrect reading/tab order
View an example with tab/reading order specified with ActionScript
WebAIM is an initiative of:
