Creating Accessible Flash Content
Flash Accessibility Techniques and Consideration
Article Contents
- Page 1: Creating Accessible Flash Content
- Page 2: Creating Text Equivalents for Flash Content
- Page 3: Keyboard Accessibility and Reading Order
- Current page: Page 4: Flash Accessibility Techniques and Considerations
Hiding Unimportant Flash Content
Some Flash content, including banner ads or page decorations, are often not necessary to the content of the page. Because of limitations with version 6 and older of the Flash player, including a Flash movie on a web page could, in many cases, make the rest of the HTML content on the page totally inaccessible. If the end user has an older version of the Flash player installed, the Flash movie object on the page will maintain the keyboard focus within the movie as soon as it is given focus. This means that keyboard users can become "stuck" within the Flash movie and will not be able to navigate to other elements within the page. To hide unimportant Flash content from both web browser and screen readers, add the wmode option with a value of opaque to both the object and embed tags of the web page containing the Flash movie.
<object ...>
<param name="wmode" value="opaque">
<embed wmode="opaque" ...>
</embed>
</object>
This will effectively hide the Flash movie from the screen reader and the keyboard. It will still appear visibly within the page, but while navigating through the page, the keyboard will bypass the Flash content and the screen reader will act as if it isn't even there. Only use this technique if the movie does not convey important content or if an accessible alternative is provided for the content the movie does contain. If the movie does contain important information, either display the Flash movie in a page by itself or include the link to download the latest version of the Flash player and inform users that they need to use this version.
Important
Newer versions of Mozilla, Opera, and Netscape will always treat Flash content as hidden and will not allow access to it using the keyboard.
View a page with a hidden Flash movie
As an alternative, you can also deselect the option on the panel in Flash. When this option is deselected, the screen reader will identify that a Flash object is present, but it will not access any of the content within the movie. This means that screen reader users will not be able to access any of the content or buttons within the Flash movie, but they will at least know that a Flash movie is present. Those not using a screen reader will be able to access the buttons within the Flash movie when tabbing through the page.
In short, setting wmode to opaque will entirely disable keyboard access to the movie contents and buttons for all users. Deselecting the option will notify screen reader users that a Flash movie is there, but will make the contents of the movie inaccessible to the screen reader, while other keyboard users will still be able to navigate to any buttons within the Flash movie.
Detecting Screen Readers
Perhaps you want to provide a different Flash interface or options if a user is using a screen reader. For instance, you may want to provide additional buttons or turn on self-voicing features when the person watching your movie is using a screen reader. You can detect screen readers using ActionScript. The Accessibility.isActive() function will return "true" if a screen reader that is capable of accessing Flash content is detected (currently only up-to-date versions of Window-Eyes, JAWS, and IBM Home Page Reader). For instance, you might add:
if (Accessibility.isActive()) {
_root.selfVoicing.play();
}
Important
Because there is a slight delay between when your movie begins and when the screen reader is detected, Accessibility.isActive() may incorrectly return false during the first few moments that your movie is playing. The Flash movie must also have focus in order for this to work. This can be solved by associating the ActionScript with a button within the Flash movie.
Finally, this method of detecting a screen reader, will not detect all screen readers. It will only detect the most recent versions of screen readers that support MSAA and have the Flash 6+ player installed.
This method is the only way of automatically detecting screen readers on the web. If you want to provide alternative content for screen reader users, you could use a Flash movie to detect the presence of a screen reader and redirect appropriately. However, this also assumes that the user has the Flash player installed (which most users do). If the user does not have Flash, then the detection will not work and the user might be presented with additional accessibility issues. Care must also be taken in providing alternative content for screen reader users. The alternative content must be kept up-to-date and provide the same information and functionality as the non-screen reader content. Here is the code to redirect based on screen reader presence:
if (Accessibility.isActive()) {
getURL(screenreaderpage.htm);
} else {
getURL(normalpage.htm);
}
Other Flash Accessibility Considerations
Accessibility of Flash components
In Flash MX 2004, the following Flash interactive components are available:
- Simple Button
- Check Box
- Radio Button
- Label
- Text Input
- Text Area
- Combo Box
- List Box
- Window
- Alert
- Data Grid
Each of these components allow accessibility options (such as keyboard navigation), however these options are not enabled by default. To enable the accessibility features of these components, use the enableAccessibility(); command. For instance, to include the accessibility features of the Simple Button component, use the following code:
import mx.accessibility.ButtonAccImpl;
ButtonAccImpl.enableAccessibility();
This code only needs to be included once for each component type and should be added to the first frame of your movie. When components are used, testing must be done to ensure that accessibility is achieved.
Photosensitive epilepsy
By causing your Flash movie to strobe or flash, you may induce an epileptic seizure in those susceptible to them. Avoid bright flashing elements that strobe more than 2 times per second.
Hit areas
A hit area is a button that does not have anything in the up, over, or down states, but has a shape defined in the hit state, thus making it an invisible, clickable button. These hit area buttons can then be placed within the movie to allow interaction, but do not show up visibly to the user. They are typically placed above text or graphical elements so these elements appear to work as a button, but are indeed separate from the invisible button. They are useful to Flash developers who want to create one invisible button that can be used to perform ActionScript, but otherwise does not display anything.
Screen readers will entirely ignore buttons that do not have something within the up, over, or down states, even if alternative text (Name and/or Description) is provided for the button. This can be remedied by placing an element within one of these three button states. If you still want the benefit of the "invisible" button, you can place a movie clip symbol with alpha set to 0 in one of the states, thus making the included content invisible to the eye or you can place the contents of the button off of the stage. Because the button now contains something, it will be accessible to the screen reader. Remember to add alternative text if necessary.
Linking to the Flash plug-in
Accessibility standards require that if you use a plug-in, you must provide a link so the user can download that plug-in. Although this process is semi-automated in most up-to-date browsers, you should still provide a link for the user to download the most recent version of the Flash plug-in BEFORE you present Flash content on your web page.
Using sound within Flash
If a screen reader user encounters a Flash movie that utilizes sound, it may be difficult for them to listen to both the screen reader and the Flash audio. In most cases, you can provide an option for users to turn ON audio when they first access a site or give them instructions before accessing the movie on how to disable audio (perhaps a shortcut key). If the sound must play when the movie first loads, provide an option to turn off the audio as the first navigational element within the Flash movie.
Shortcut keys
When a button is selected on the stage, an option for will display on the panel.
This allows you to indicate to the user which key or key sequence is used to activate that Flash element. When specifying the shortcut key, spell out key names, such as Ctrl or Alt. Use capital letters for alphabetic characters and use a plus sign (+) between key names, with no spaces, for example, Ctrl+A. Specifying the shortcut name does not enable the shortcut key - you will need to program additional ActionScript within the movie to capture that keyboard sequence. Shortcuts are usually only useful on button or interactive movie clip objects.
Be careful with your selection of shortcut keys. Much user testing must be undertaken to ensure that the selected shortcut key or key sequence does not interfere with normal browser or assistive technology functionality. Because screen reader users do not typically use a mouse, there are many more shortcut keys for screen readers than there are for typical web browsers.
Mouse-only interactions
Do not use interactive elements within your Flash movie that require the use of the mouse. The most common of these are drag-and-drop and double click. There is no keyboard alternative for either of these events. Flash elements, such as scroll bars and sliders, must include functionality that allows them to be used via a keyboard.
Do not require fine motor skills in order to navigate the movie. Do not move buttons that the user may want to select and make sure that navigation items are of a sufficient size.
User control of timing
Give the user control over important content changes. Allow the user to control when new content is presented. Someone with a cognitive or learning disability may require more time to accomplish a task or understand a section of content. A screen reader must have enough time to complete reading a section of content before moving on.
Scaling content
Because Flash is vector based, it can be easily resized and maintain its original look. Vector elements do not pixelate and can be infinitely enlarged on a screen without losing their shape or quality. This feature is very useful to individuals with low vision. When possible, allow your Flash content to automatically scale to a percentage value of the browser width and height rather than specifying pixel values for width and height. This allows the content to be enlarged as the web page is enlarged in browsers and assistive technologies that provide this functionality.
Flash authoring environment
Because of the visual nature of the Flash authoring environment, it is almost entirely inaccessible to both screen reader and keyboard users. Although menu items, panels, and drawing tools are exposed to screen readers and can be accessed via the keyboard, it is impossible to use the tools to add elements to the Flash stage without using a mouse.
WebAIM is an initiative of:
