Creating Accessible Flash Content
Creating Text Equivalents for
- Page 1: Creating Accessible Flash Content
- Current page: Page 2: Creating Text Equivalents for Flash Content
- Page 3: Keyboard Accessibility and Reading Order
- Page 4: Flash Accessibility Techniques and Considerations
Text equivalents must be provided in Flash for every non-text element that conveys important content. This means that graphics, animations, and video must have textual equivalents that can be accessed by someone who cannot see those elements. Also, a textual equivalent (captions and/or transcripts) must be provided for all audio content that is not also conveyed through the visual elements of the presentation.
The Flash accessibility panel
You can provide text equivalents for graphical elements within Flash using the Flash Accessibility panel, available at ALT + F2.within Flash or by pressing
All of these examples use Flash MX 2004 Professional. Appearance and functionality may be slightly different in other versions of Flash.
There are several options available on the Accessibility panel. The items that are visible on the Accessibility panel vary based on the type of object that is currently selected.
: If selected (the default), then accessibility features of Flash will be exposed to the screen reader. If not selected, the screen reader will identify that a Flash movie is there, but will not access any of the content within the movie.
: If this option is deselected, the currently selected object will be made invisible to the screen reader and the textual equivalent and any text immediately within the current symbol will not be accessible to the screen reader. This can be useful if the symbol does not convey important content. By default, objects are accessible, so be sure to select this option if the object contains important text or convey content.
: If you have other objects or symbols embedded within a selected symbol, you can make them hidden by selecting this option. This is useful for symbols that are comprised of multiple objects, but as a whole only need one text equivalent. For instance, if a movie clip symbol contains a text animation wherein each character of a word is animating independently, you wouldn't want each character to be read individually by the screen reader. To solve this, you would add alternative text to the movie clip itself and deselect the to hide the animating items within the movie clip.
: This option tells Flash to associate buttons with text that are within or near the button. If all of your buttons have text within them or adjacent to them, then Auto label can automatically associate them and will read the text as the alternative text for the button. The results are not always as expected and care should be taken when using Auto label.
: This is where you would enter alternative text for a Flash object. This is what the screen reader will read in place of the selected element. You can enter a brief (one or two short sentences) name or description of the object.
: This is used for longer descriptions of Flash objects and is not required unless additional description is needed beyond that allowed within Name. If both Name and Description are provided, the screen reader will read the Name first, then the Description. Functionally, there is no difference between Name and Description.
: This allows you to indicate to the user what the shortcut key is for that specific object. It does not program the keyboard shortcut, but simply alerts the user as to what the shortcut key is.
How Flash Text Equivalents Work
By default, text inside of Flash is exposed to the screen reader through MSAA. There isn't anything special you have to do to make your text accessible to screen readers. If your Flash movie is nothing more than static text, then it will probably be accessible to screen readers without any other modifications. Of course, Flash is rarely used to display static text. While text elements do not require modification by the designer/developer, other elements do. Designers and developers may use the Accessibility panel in Flash to add a text equivalent or even to hide elements from assistive technologies. View a text-only example ().
When a screen reader accesses a page that contains Flash content, it indicates so. JAWS reads, "Flash Movie Start" (this is customizable in the JAWS settings) and Window-Eyes reads, "Has Flash". This alerts the user to what is happening if the page suddenly begins reading confusing information or if the page does not seem to be keyboard accessible because of the Flash content. When the Flash movie is accessed, the screen reader will read all of the text and text alternatives within the Flash movie. When it is done, it will indicate that it is done. As long as the text is within the Flash movie when the screen reader accesses it, it will be read.
Because of the linear nature of screen readers, they can only read the content that is exposed to them at the moment they access a particular place within your Flash movie. For instance, if you have a series of quotes that randomly display every 10 seconds within your Flash movie, the screen reader will only read the quote that is currently displayed when that portion of the Flash movie is accessed. If the quote changes while that Flash element is being accessed, then the screen reader is alerted that something has changed and it begins reading again at the top of the page. The fact that a screen reader starts at the top of the page if any text object on the page changes while the screen reader has access to it is what makes the vast majority of Flash content inaccessible to screen readers.
Avoid exposing text animation or changes to the screen reader. Any time an exposed element within your Flash movie changes, the screen reader may begin reading from the top of the page.
You can avoid this problem by either avoiding animating text objects in Flash or by hiding them from the screen reader as demonstrated later in this tutorial.
Any text that is within the Flash movie is read when the screen reader accesses the movie. This includes text that is within buttons. Beginning with the Flash MX authoring environment, you can add textual equivalents to graphical elements, as long as the elements are defined as movie clips symbols or buttons. Text equivalents are not supported on symbols defined with the "graphic" behavior. If a graphical item does not have alternative text defined for it, then the screen reader ignores it.
View a graphic example (). This example does not have a text equivalent added, so the screen reader will ignore it.
Adding Text Equivalents
To add a text equivalent, select an item on the stage and enter a short description of the object into the View an accessible graphic example (). Be aware that the Name and Description are totally invisible, except to screen readers. You do not get any visual indication or tool tip for textual equivalents. Items that are already text within Flash do not need a text equivalent as the text itself will be read. Make sure that the text items are truly text and form intelligible words. Graphical shapes and multiple text elements that are placed together to visibly form words will not be read correctly as text. In such cases, these elements should be placed within a movie clip symbol which is assigned the appropriate alternative text for the group in the Name field. Deselect the option on the panel to hide the internal contents of the movie clip symbol from the screen reader. Equivalents may be added to text items if they are defined as dynamic text, in which case the text within the dynamic text box will be ignored and the equivalent text will be read instead.text box on the panel. If a longer description is needed, it can be added to the field on the panel. The screen reader will now read this text in place of the object.
The text equivalent (Name or Description) does not have to be exactly the same as the content. You can provide additional or less information as desired. The same techniques for determining
alt text for HTML images should be used when assigning alternative text in Flash. However, because of its dynamic nature, sometimes an exact equivalent may not be appropriate. For instance, if a movie has dozens of words flying around the screen to draw attention, it may not be appropriate to provide alternative text for all of them. Instead, you might either provide alternative text for one or two or describe in general what is happening; or, you may provide no alternative to the words at all, if you determine that they provide no important content.
As previously discussed, if you animate text, the Flash movie indicates that there is a change in the movie and the screen reader may begin reading at the top of the page. However, animating graphics are not a problem for screen reader users because the text equivalent for the graphic (if provided) will be read. Animated graphics may be a problem for someone with photosensitive epilepsy if the animation causes blinking or flickering. View an accessible animated graphic ().
Making buttons accessible within Flash
There are three methods for making buttons accessible within Flash (listed in order of reliability and ease-of-use):
- Place text within the button symbol. This text will be read when the button is accessed.
- Provide an alternative equivalent in the and/or fields on the panel.
- Place text adjacent to the button and use the feature on the panel.
If text is inside of a button symbol then the text will be read by a screen reader when the button is accessed. If a button symbol does not itself contain text, then a text equivalent should be provided in the Accessibility panel. By default, the screen reader will indicate that it is a button and read the text contained within it or the text equivalent. JAWS reads the text, then reads, "button". Window-Eyes reads, "button", then reads the text. View Flash buttons with text equivalents ().
If the button contains more than one text element, then Flash will pick (seemingly at random) only one of the text items and read it.
As indicated previously, Flash also has anfeature found on the panel. This option appears on the panel when nothing is selected on the stage. When is selected, if there is no equivalent specified for a button and no text appears within the button, then Flash will attempt to auto-associate any text that is on top of or near the button and read it as the equivalent. This works great, as long as the appropriate text label for a button is positioned in a way that Flash properly assumes that it goes with the correct button.
The results of using Auto Label are so random and sporadic, that it is usually best to leave it deselected and always place text either inside of buttons or within the Accessibility panel. If Auto Label is used, a compatible screen reader must be used to test if the appropriate text has been auto-associated with the correct buttons within the movie.
Animating text within any of a button's states (up, over, down, or hit) will not be read by a screen reader and may cause the screen reader to continually begin reading from the top of the web page. If a button contains animating text,should be deselected in the panel and a text equivalent ( and/or ) should be provided instead.
Providing Text Equivalents for the Entire Movie
If it is appropriate, you can easily provide a text equivalent for your entire movie, rather than worrying about trying to get individual parts of the movie to be accessible. This would be similar to providing an alternative text for an entire web page. Just deselect everything on the Flash stage, select thepanel, and deselect to hide the internal contents of the movie. Then deselect and add a brief and if needed, a longer .
Most Flash advertisements could be made more accessible in this manner, though if they contain a button, they may interfere with keyboard navigation, as described in the Keyboard accessibility section. View a movie with text equivalent ()