This Web page lists Flash Techniques from Techniques for WCAG 2.0: Techniques and Failures for Web Content Accessibility Guidelines 2.0. For information about the techniques, see Introduction to Techniques for WCAG 2.0. For a list of techniques for other technologies, see the Table of Contents.
Adobe Flash Professional version MX and higher
Adobe Flex
Flash accessibility support for assistive technology relies on use in Windows operating systems, using Internet Explorer 6 or later (with Flash Player 6 or later) or Mozilla Firefox 3 or later (with Flash Player 9 or later).
This technique relates to:
The objective of this technique is to show how non-text objects in Flash can be marked so that they can be read by assistive technology.
The Flash Player supports text alternatives to non-text objects using the name property in the accessiblity object, which can be defined in ActionScript or within Flash authoring tools.
When an object contains words that are important to understanding the content, the name property should include those words. This will allow the name property to play the same function on the page as the object. Note that it does not necessarily describe the visual characteristics of the object itself but must convey the same meaning as the object.
The Flash Professional authoring tool's Accessibility panel lets authors provide accessibility information to assistive technology and set accessibility options for individual Flash objects or entire Flash applications.
For a text alternative to be applied to a non-text object, it must be saved as a symbol in the movie's library. Note: Flash does not support text alternatives for graphic symbols. Instead, the graphic must be converted to or stored in a movie clip or button symbol.
Bring up the accessibility panel by selecting "Window > Other Panels > Accessibility" in the application menu, or through the shortcut ALT + F11. Ensure that the 'Make object accessible' checkbox is checked.
Select the non-text instance on the movie stage, the fields in the accessibility panel become editable.
Enter a meaningful text alternative in the 'name' field, properly describing the purpose of the symbol.
To manage an object's text equivalent programmatically using ActionScript 2, the _accProps object must be used. This references an object containing accessibility related properties set for the object. The code example below shows a simple example of how the _accProps object is used to set an objects name in ActionScript.
Example Code:
// 'print_btn' is an instance placed on the movie's main timeline
_root.print_btn._accProps = new Object();
_root.print_btn._accProps.name = "Print";To manage an object's text equivalents programmatically using ActionScript 3, the AccessibilityProperties object and name property must be used. The code example below shows a simple example of how the name property is used to set an objects name in ActionScript.
Example Code:
// 'print_btn' is an instance placed on the movie's main timeline
print_btn.accessibilityProperties = new AccessibilityProperties();
print_btn.accessibilityProperties.name = "Print";Publish the SWF file
Open the SWF file in Internet Explorer 6 or higher (using Flash Player 6 or higher), or Firefox 3 or higher (using Flash Player 9 or higher)
Use a tool which is capable of showing an object's name text alternative, such as aDesigner2 to open the Flash movie.
In the GUI summary panel, loop over each object which is contained by the Flash movie and ensure the object that was provided a name has a proper name attribute appearing in the tool's display.
Authors may also test with a screen reader, by reading the Flash content and listening to hear that the equivalent text is read when tabbing to the non-text object (if it is tabbable) or hearing the alternative text read when reading the content line-by-line.
All non-text objects have text equivalents that can serve the same purpose and convey the same information as the non-text object
Check #6 is true.
Adobe Flash Professional version MX and higher
Adobe Flex
Flash accessibility support for assistive technology relies on use in Windows operating systems, using Internet Explorer 6 or later (with Flash Player 6 or later) or Mozilla Firefox 3 or later (with Flash Player 9 or later).
This technique relates to:
The objective of this technique is to provide a long text alternative that serves the same purpose and presents the same information as the original non-text content when a short text alternative is not sufficient.
The Flash Player supports long text alternatives to non-text objects, which can be defined in ActionScript or within Flash authoring tools using the Description property, as indicated in the examples below.
The Flash Professional authoring tool's Accessibility panel lets authors provide accessibility information to assistive technology and set accessibility options for individual Flash objects or entire Flash applications.
For a text alternative to be applied to a non-text object, it must be saved as a symbol in the movie's library. Note: Flash does not support text alternatives for graphic symbols. Instead, the graphic must be converted to or stored in a movie clip or button symbol.
Bring up the accessibility panel by selecting "Window > Other Panels > Accessibility" in the application menu, or through the shortcut ALT + F11. Ensure that the 'Make object accessible' checkbox is checked.
Select the non-text instance on the movie stage, the fields in the accessibility panel become editable.
Enter a description describing the non-text object's contents concisely. For example, a diagram could have a 'name' identifying what information the diagram conveys, while the 'Description' field lists this information in full detail. Alternatively, for an animation which is part of an instructional movie about car repairs the name could be: 'how to replace a flat tire', while the long description describes each step of the process in greater detail.
Important: Only use the 'Description' field if a short text alternative is not sufficient to describe the objects purpose. Otherwise, leave the 'Description' field empty.
Editorial Note: I suggest this should be a separate image from FLASH1, showing the description field filled out.
To manage an object's text equivalents programmatically using actionscript, the _accProps opbject must be used. This references an object containing accessibility related properties set for the object. The code example below shows a simple example of how the _accProps object is used to set an objects name and description in ActionScript.
A chart showing sales for October has a short text alternative of "October sales chart". The long description would provide more information, as shown in the code below.
Example Code:
// 'chart_mc' is an instance placed on the movie's main timeline
_root.chart_mc._accProps = new Object();
_root.chart_mc._accProps.name = "October Sales Chart";
_root.chart_mc._accProps.description = "Bar Chart showing sales for October.
There are 6 salespersons. Maria is highest with 349 units. Frances is next
with 301. Then comes Juan with 256, Sue with 250, Li with 200 and Max
with 195. The primary use of the chart is to show leaders, so the description
is in sales order."; To manage an object's text equivalents programmatically using actionscript, the AccessibilityProperties object must be used. The code example below shows a simple example of how the AccessibilityProperties object used to set an objects name and description in ActionScript.
A chart showing sales for October has a short text alternative of "October sales chart". The long description would provide more information, as shown in the code below.
Example Code:
// 'chart_mc' is an instance placed on the movie's main timeline
chart_mc.accessibilityProperties = new AccessibilityProperties();
chart_mc.accessibilityProperties.name = "October Sales Chart";
chart_mc.accessibilityProperties.description = "Bar Chart showing sales for October.
There are 6 salespersons. Maria is highest with 349 units. Frances is next
with 301. Then comes Juan with 256, Sue with 250, Li with 200 and Max
with 195. The primary use of the chart is to show leaders, so the description
is in sales order."; Resources are for information purposes only, no endorsement implied.
Publish the SWF file
Open the SWF file in Internet Explorer 6 or higher (using Flash Player 6 or higher), or Firefox 3 or higher (using Flash Player 9 or higher)
Use a tool which is capable of showing an object's long description, such as aDesigner2 to open the Flash movie.
In the GUI summary panel, loop over each object which is contained by the Flash movie and ensure the object that was provided a description has a proper description value appearing in the tool's display.
Authors may also test with a screen reader, by reading the Flash content and listening to hear that the description is read when tabbing to the non-text object (if it is tabbable) or hearing the alternative text read when reading the content line-by-line.
All non-text objects have text equivalents that can serve the same purpose and convey the same information as the non-text object.
#6 is true.
Adobe Flash Professional version MX and higher
Adobe Flex
Flash accessibility support for assistive technology relies on use in Windows operating systems, using Internet Explorer 6 or later (with Flash Player 6 or later) or Mozilla Firefox 3 or later (with Flash Player 9 or later).
This technique relates to:
The purpose of this technique is to show how images can be marked so that they can be ignored by Assistive Technology.
The Flash Player supports the ability for authors to control which graphics appear to assistive technologies using the silent property of the accessibility opbect, as indicated in the examples below.
The Flash Professional authoring tool's Accessibility panel lets authors provide accessibility information to assistive technology and set accessibility options for individual Flash objects or entire Flash applications.
To apply changes to accessibility properties for a graphic, it must be saved as a symbol in the movie's library. Note: Flash does not support text alternatives for graphic symbols. Instead, the graphic must be converted to or stored in a movie clip or button symbol.
Bring up the accessibility panel by selecting "Window > Other Panels > Accessibility" in the application menu, or through the shortcut ALT + F11.
Select the graphic object
If the 'Make object accessible' checkbox in the accessibility control panel is checked, uncheck this option to remove the graphic from the accessiblity information conveyed to assistive technologies.
To manage an object's text equivalents programmatically using actionscript, the _accProps property must be used. This references an object containing accessibility related properties set for the object. The code example below shows a simple example of how the _accProps property is used to remove an object from the accessibility information for the movie using ActionScript.
Example Code:
// 'decorative_mc' is an instance placed on the movie's main timeline
_root.decorative_mc._accProps = new Object();
_root.decorative_mc._accProps.silent = true;
Resources are for information purposes only, no endorsement implied.
Publish the SWF file
Open the SWF file in Internet Explorer 6 or higher (using Flash Player 6 or higher), or Firefox 3 or higher (using Flash Player 9 or higher)
Use a tool which is capable of showing an object's accessibility information, such as aDesigner2 to open the Flash movie.
In the GUI summary panel, loop over each object which is contained by the Flash movie and ensure the object that was designed to be hidden does not appear in the tool's display.
Authors may also test with a screen reader, by reading the Flash content and listening to hear that object is not mentioned when the page is read.
Non-text objects that are coded to be hidden from assistive technologies are not available to assistive technology.
Check #6 is true.
Adobe Flash Professional version MX and higher
Adobe Flex
Flash accessibility support for assistive technology relies on use in Windows operating systems, using Internet Explorer 6 or later (with Flash Player 6 or later) or Mozilla Firefox 3 or later (with Flash Player 9 or later).
This technique relates to:
The objective of this technique is to use submit buttons to allow users to take actions that cause changes of context rather than allowing changes in context to occur when the value or state of a non-submit button control is modified. The intended use of a submit button in this technique is to generate an HTTP request that submits data entered in a form or to perform an action that triggers a change in context, so it is an appropriate control to use to initiate this change.
This is a basic ActionScript 3 example of a combobox component with a submit button to redirect the user to a different resource.
Example Code:
import fl.accessibility.ComboBoxAccImpl;
import flash.net.navigateToURL;
import flash.net.URLRequest;
ComboBoxAccImpl.enableAccessibility();
state_submit.addEventListener(MouseEvent.CLICK, submitHandler);
function submitHandler(e) {
var url:URLRequest = new URLRequest("http://www.wikipedia.org/wiki/" + state_combo.selectedLabel);
navigateToURL(url, "_self");
} This is a basic ActionScript 2 example of a combobox component with a submit button to redirect the user to a different resource - the same example as in example 1 except in ActionScript 2:
Example Code:
import fl.accessibility.ComboBoxAccImpl;
ComboBoxAccImpl.enableAccessibility();
state_submit.addEventListener("click", submitHandler);
function submitHandler(e) {
getURL("http://www.wikipedia.org/wiki/" + state_combo.selectedLabel, "_self");
} Find all interactive control instances (that are not submit buttons) in the flash movie that can initiate a change of context, e.g. a combobox, radio button or checkbox.
For each instance, confirm that the event handler(s) responsible for the change of context are not associated with the controls themselves, but with a separate button instead.
#2 is true
Adobe Flash Professional version MX and higher
Adobe Flex
Flash accessibility support for assistive technology relies on use in Windows operating systems, using Internet Explorer 6 or later (with Flash Player 6 or later) or Mozilla Firefox 3 or later (with Flash Player 9 or later).
This technique relates to:
The objective of this technique is to avoid unnecessary duplication that occurs when adjacent text and iconic versions of a button are contained in a Flash movie.
Many kinds of buttons have both a text and iconic button adjacent to each other. Often the text and the icon button are rendered in separate buttons, in part to create a slight visual separation from each other. Although the sighted user can see this slight visual separation, a blind or low vision user may not be able to recognize the separation, and be confused by the redundant buttons. To avoid this, some authors omit specifying the accessible name for the image, but this would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical button. The preferred method to address this is to put the text and image together in one button symbol instance, and provide a single accessible name for the button to eliminate duplication of text.
The following examples are for a situation where a button instance comprised of both an image and text is on the stage. The combined button in this example uses the instance name 'flashLink1'.
To create the combined button in Flash Professional:
Add a graphic object and text to the stage
Select both objects
Select 'New Symbol' from the Insert menu or hit Ctrl+F8 to create a new button object
Click on the button object on the stage and enter an instance name in the properties panel.
Continue under example 1, 2, or 3 below.
The accessibility panel is used to specify the accessible name (which in this case is the same as the visual text).
ActionScript 3 can be used instead of the accessibility control panel to define the accessibility name for the combined button, as follows:
Example Code:
// 'flashLink1' is an instance placed on the movie's main timeline
flashLink1.accessibilityProperties = new AccessibilityProperties();
flashLink1.accessibilityProperties.name = "Learn more about Flash";ActionScript 2 can be used instead of the accessibility control panel to define the accessibility name for the combined button, as follows
Example Code:
// 'flashLink1' is an instance placed on the movie's main timeline
flashLink1._accProps = new Object();
flashLink1._accProps.name = "Learn more about Flash"; Publish the SWF file
Open the SWF file in Internet Explorer 6 or higher (using Flash Player 6 or higher), or Firefox 3 or higher (using Flash Player 9 or higher)
Use a tool which is capable of showing an object's name text alternative, such as aDesigner2 to open the Flash movie.
If you are using aDesigner2, use the GUI Summary panel to check each image button in the Flash movie and ensure that there is no separate, redundant text control adjacent to the image that performs the same action.
All checks above are true.
Adobe Flash Professional version MX and higher
Adobe Flex
Flash accessibility support for assistive technology relies on use in Windows operating systems, using Internet Explorer 6 or later (with Flash Player 6 or later) or Mozilla Firefox 3 or later (with Flash Player 9 or later).
This technique relates to:
The objective of this technique is to provide text alternatives that serve the same purpose as the clickable hotspots of an image. Each hotspot serves as a clickable region for a part of the image which can trigger an action (such as opening a web page corresponding to the hotspot). The hotspot are implemented as invisible Flash buttons, which are each given an accessible name that describes the hotspot's target.
Add the original graphic that needs to have clickable hotspots to the stage.
For each hotspot, do the following:
Create a new button symbol by choosing "New Symbol" from the Flash Professional 'Insert' menu or by using the Ctrl + F8 shortcut.
Inside the button symbol, create a shape that matches the clickable surface.
Place the newly created button on top of the original graphic.
Open the button's properties panel, and choose "Alpha" from the "Style" dropdown list under "Color Effect". Change the value of the "Alpha" slider that appears to zero so that the button becomes invisible.
Using the accessibility panel, specify a value for the "tabindex" field to give the button a logical position in the tab order.
Using the accessibility panel, specify an accessible name that describes the purpose of the hotspot.
The result can be seen in the working example of creating accessible hotspots using invisible buttons. The source of creating accessible hotspots using invisible buttons is available.
Find all images with hotspots. For each hotspot, confirm that:
The hotspot is implemented as an invisible button
The hotspot is provided with an accessible name, either through the accessibility panel or through ActionScript
#1 and #2 are true
Adobe Flash-based Content with form controls
Adobe Flash Professional version MX and higher
This technique relates to:
The purpose of this technique is to allow users to choose to have additional information added to the label of a button or other control so that it can be understood out of context.
Some users prefer to have control labels that are self-contained, where there is no need to explore the context of the control. Other users find including the context information in each button to be repetitive and to reduce their ability to use a site. Among users of assistive technology, the feedback to the working group on which is preferable has been divided. This technique allows users to pick the approach that works best for them.
A control is provided near the beginning of the page that will expand the labels for controls on the page so that no additional context is needed to understand the purpose of those controls. It must always be possible to understand purpose of the control directly from its label.
This technique expands the control labels only for the current page view. It is also possible, and in some cases would be advisable, to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site.
This example uses ActionScript to add contextual information directly to the label of a button. When the "Expand Button Labels" button is toggled, each button on the page has its label property modified.
Example Code:
import fl.accessibility.ButtonAccImpl; ButtonAccImpl.enableAccessibility();
btn1.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(e) {
btn2.label = btn1.selected ? "PDF version of 2010 brochure" : "PDF" ;
btn2.width = btn1.selected ? 200 : 100;
btn3.label = btn1.selected ? "Text version of 2010 brochure" : "Text" ;
btn3.width = btn1.selected ? 200 : 100;
btn4.label = btn1.selected ? "Word version of 2010 brochure" : "Word" ;
btn4.width = btn1.selected ? 200 : 100;
} The result can be seen in the working example of adding contextual information to a button label. The source of adding contextual information to a button label is available.
When a Flash Movie contains content with context dependent labels, confirm that a separate toggle control is provided that allows the user to expand the labels so that they are no longer context dependent.
The above is true.
Adobe Flash-based Content with form controls
Adobe Flash Professional version MX and higher
This technique relates to:
The objective of this technique is to provide a semantic grouping for related form controls. This allows users to understand the relationship of the controls and interact with the form more quickly and effectively.
In Flash, when related form controls are grouped, this grouping can be indicated by adding the group's name to each form control's accessible name.
Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field. They work in the same way as selection lists, allowing the user to choose from a set of options, except selection lists are single controls while radio buttons and checkboxes are multiple controls. Because they are multiple controls, it is particularly important that they be grouped semantically so they can be more easily treated as a single control. Often, user agents will present the value of the legend before the label of each control, to remind users that they are part of the same group.
It can also be useful to group other sets of controls that are not as tightly related as sets of radio buttons and checkboxes. For instance, several fields that collect a user's address might be grouped together with a legend of "Address".
This example shows how the group name for radio buttons in a group can be made accessible by adding it to each button's accessible name:
Add radio button components to the stage:
Enter each button's label using its "label" property
Add the visual group label to the left or above the buttons added in step 1
Select each radio button. In the Accessibility Panel, add the group name to the "Name" field;
Flash will concatenate the group name with each button's individual name, such as "gender male".
This approach is illustrated in the screenshot below:
Note: Note: To make the radio buttons in this example accessible, the following two lines need to be added to the movie's script:
Example Code:
import fl.accessibility.RadioButtonAccImpl;
RadioButtonAccImpl.enableAccessibility(); The code example below shows a basic proof of concept of a class that automatically places a set of form controls inside a fieldset like rectangle, including a legend. For each added control an AccessibilityProperties object is created, and its name property is set to a combination of the legend text and the actual form control label.
Example Code:
package wcagSamples {
import flash.display.*;
import flash.text.*;
import fl.controls.*
import flash.accessibility.*;
import fl.accessibility.*;
/**
* Basic example that demonstrates how to simulate a fieldset, as provided in HTML.
* The FieldSet class takes a group of controls and places them inside a fieldset rectangle
* with the legend text at the top. For each form control, the legend text is prepended to the control's
* accessible name
*
* Note: This is only a proof of concept, not a fully functional class
*
* @langversion 3.0
* @playerversion Flash 10
*
*/
public class FieldSet extends Sprite{
private var legend:String;
private var bBox:Shape;
private var currentY:int = 20;
public static var LABEL_OFFSET_X:int = 20;
public static var CONTROL_OFFSET_X:int = 110;
/**
* CONSTRUCTOR
* Legend specifies the FieldSet's legend text, items is an array describing the controls to be added to the FieldSet
*/
public function FieldSet(legend:String, items:Array) {
// enable accessibility for components used in this example
RadioButtonAccImpl.enableAccessibility();
CheckBoxAccImpl.enableAccessibility();
//create FieldSet rectangle and legend
legend = legend;
bBox = new Shape();
bBox.graphics.lineStyle(1);
bBox.graphics.drawRect(10, 10, 300, 250);
bBox.graphics.beginFill(0x0000FF, 1);
addChild(bBox);
var fieldSetLegend:TextField = new TextField();
fieldSetLegend.text = legend;
fieldSetLegend.x = 20;
fieldSetLegend.y = 3;
fieldSetLegend.background = true;
fieldSetLegend.backgroundColor = 0xFFFFFF;
fieldSetLegend.border = true;
fieldSetLegend.borderColor = 0x000000;
fieldSetLegend.autoSize = TextFieldAutoSize.LEFT;
addChild(fieldSetLegend);
// add controls
for (var i = 0; i < items.length; i++) {
processItem(items[i]);
}
}
/**
* Adds the control to the Fieldset and sets its accessible name. A control is represented as an array,
* containing the following values:
* [0] : A string describing the component type (can be "TextInput", TextArea", Checkbox" or "RadioGroup").
* [1] : The label used to identify the control
* [2] : If [0] is "RadioGroup", then [2] needs to contain an array of the labels for each individual radio button.
* if [0] is "CheckBox", then [1] can either be empty or a question (e.g. "Do you smoke?"), and [2] the CheckBox label
* (e.g. "Yes").
*
*/
function processItem(item:Array) {
if (item.length < 2)
return;
currentY += 30;
var newControl;
//create visual label
var lbl:Label;
lbl = new Label();
lbl.text = item[1] + ": ";
lbl.x = FieldSet.LABEL_OFFSET_X;
lbl.y = currentY;
lbl.width = FieldSet.CONTROL_OFFSET_X;
lbl.autoSize = TextFieldAutoSize.RIGHT;
lbl.wordWrap = true;
addChild(lbl);
switch (item[0]) {
case "TextInput":
case "TextArea":
newControl = item[0] == "TextInput" ? new TextInput() : new TextArea();
newControl.x = FieldSet.CONTROL_OFFSET_X;
//concatenate accessible name, combining legend and label
setAccName(newControl, legend + " " + item[1]);
break;
case "CheckBox":
newControl = new CheckBox();
newControl.label = item[2];
newControl.x = FieldSet.CONTROL_OFFSET_X;
setAccName(newControl, legend + " " + item[1] + " " + item[2]);
break;
case "RadioGroup":
if (item[2] && item[2].length > 0) {
var radioGroup:RadioButtonGroup = new RadioButtonGroup(item[0]);
var newBtn:RadioButton;;
for (var i = 0; i < item[2].length; i++) {
newBtn = new RadioButton();
// concatenate the legend, the group label, and the button label
setAccName(newBtn, legend + " " + item[1] + " " + item[2][i]);
newBtn.label = item[2][i];
newBtn.group = radioGroup;
newBtn.x = FieldSet.CONTROL_OFFSET_X;
newBtn.y = currentY;
addChild(newBtn);
if (i < item[2].length -1)
currentY += 30;
}
}
break;
}
if (newControl) {
newControl.y = currentY;
addChild(newControl);
}
}
/**
* Creates an AccessibilityProperties object for an object and sets its name property
*/
public function setAccName(obj,accName) {
var accProps:AccessibilityProperties = new AccessibilityProperties();
accProps.name = accName;
obj.accessibilityProperties = accProps;
}
}
}
This example class can be initialized as follows:
Example Code:
var myFieldSet = new FieldSet("Personal Details", // the legend
[["TextInput", "Name"], // text field
["RadioGroup", "Gender", ["Male", "Female"]], // radio button group
["CheckBox", "Do you smoke", "yes"], // checkbox
["TextArea", "Comments"], // text area
]);
addChild(myFieldSet);
For an illustration of this approach, see the working version of Programmatically adding a group name with the accessible name of radio buttons.
Note: Adobe Flex allows you to perform this type of behavior by using the <form>, <formitem> and <formheading> elements
When a Flash Movie contains grouped form controls, confirm that either :
The group's name is included in the Accessibility Panel's "name" field for each control.
Each control has an AccessibilityProperties.name property, which contains both the group's name and the control's label text
One of the above is true
Adobe Flash-based Content
Adobe Flash CS3 and later
This technique relates to:
The objective of this technique is to provide an option for people who have hearing impairments or otherwise have trouble hearing the sound and dialogue in synchronized media to be able to choose to view captions as an alternative to audio information. With this technique all of the dialogue and important sounds are provided as text in a fashion that allows the text to be hidden unless the user requests it. As a result they are visible only when needed. This can be achieved using the FLVPlayback and FLVPlaybackCaptioning components. Note: when using FLVPlayback skins the closed caption button is accessible by default, but if implementing custom skins authors need to test to verify that the button is accessible.
Use an external tool (such as Magpie or a simple text editor) to create a timed Text captions xml file. Stop and play the video content, and for each relevant part of audio information (including speech, important background noises and event sounds) include the start and end time code as well as the textual alternative. Tools like Magpie have advanced features to make this process easier, whereas a text editor requires you to read the timecodes from your media player and include them in the XML as illustrated in the sample captions document below
In Flash, create a new instance of the FLVPlayback component on your stage, and set its contentPath value to your flv video file using the 'Component inspector' or 'Parameters' panel.
Set the 'Skin' parameter to use a skin which includes the CC (closed captions) button.
From the components list also create an instance of the FLVPlayback captioning component. In the 'Component inspector' panel set its 'Source' parameter to the name of your timed text xml file. The captions will automatically placed at the bottom of the player's frame.
Example Code:
<?xml version="1.0" encoding="UTF-8"?>
<tt xmlns="http://www.w3.org/2006/04/ttaf1"
xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling" xml:lang="en">
<head>
<styling>
<style id="defaultSpeaker" tts:fontSize="12" tts:fontFamily="SansSerif" tts:fontWeight="normal" tts:fontStyle="normal" tts:textDecoration="none" tts:color="white" tts:backgroundColor="black" tts:textAlign="left" />
<style id="defaultCaption" tts:fontSize="12" tts:fontFamily="Arial" tts:fontWeight="normal" tts:fontStyle="normal" tts:textDecoration="none" tts:color="white" tts:backgroundColor="black" tts:textAlign="center" />
</styling>
</head>
<body id="thebody" style="defaultCaption">
<div xml:lang="en">
<p begin="0:00:00.20" end="0:00:02.20">If there were nothing <br />
in our universe</p>
<p begin="0:00:02.20" end="0:00:05.65">the fabric of space-time <br />
would be flat.</p>
<p begin="0:00:05.65" end="0:00:08.88">But add a mass, <br />
and dimples form within it.</p>
<p begin="0:00:16.61" end="0:00:19.84">Smaller objects that <br />
approach that large mass</p>
<p begin="0:00:19.84" end="0:00:23.41">will follow the curve <br />in space-time around it.</p>
<p begin="0:00:32.64" end="0:00:36.84">Our nearest star, the sun, <br />has formed such a dimple</p>
<p begin="0:00:36.84" end="0:00:38.00">and our tiny planet Earth</p>
<p begin="0:00:38.00" end="0:00:41.50">goes along for the ride <br />in the curve of its dimple</p>
<p begin="0:00:41.50" end="0:00:43.80">staying in orbit <br />around the sun.</p>
<p begin="0:00:45.67" end="0:01:55.00"></p>
</div>
</body>
</tt>
Resources are for information purposes only, no endorsement implied.
http://ncam.wgbh.org/webaccess/magpie/
Watch all video content displayed by your Flash movie. Ensure that:
Captions are available for all audio content, either turned on by default or as a user preference.
The captions properly describe all audio information contained in the video.
#1 and #2 are true
Adobe Flash-based Content with form controls
Adobe Flash Professional version MX and higher
This technique relates to:
The objective of this technique is to provide a clear indication that a specific form control in a Web application or form is required for successful data submission. The word "required" is added to the form control's accessible name, and a visual indicator is placed next to the label.
This example shows how to use the Accessibility panel to indicate a field as being 'required' to users:
Visually, place asterisk character or some other indication adjacent to the form control's label.
Use the accessibility panel to combine the word "required" with the control's label in the "Name" field.
This approach is illustrated in the screenshot below:
For each required form control within a Flash movie, confirm that:
The required state is indicated visually
The required state is indicated textually using the 'Name' field in the accessibility panel
Each of the above is true
Adobe Flash-based Content
Adobe Flash Professional version MX and higher
This technique relates to:
The objective of this technique is to a provide longer, more detailed textual information for an image than would be suitable for the image's accessible name. An accessible button is provided adjacent to the image that displays a new panel containing the image's long description text.
In this example, an image containing statistical data is shown. The image is provided a short textual alternative ("Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities"). Below the image, the user can click a button that will overlay a long textual description of the statistical information itself. When the button is clicked, the following actions are taken:
The MovieClip containing the long text description is made visible, and its AccessibilityProperties.silent property is set to false to make it visible to assistive technology. Its contents are placed in the tab order.
The original image and button are temporarily hidden from assistive technology and the tab order.
The image and descriptive text were taken from an HTML example for long image descriptions on WebAIM.org
The results for this technique are shown in the working version of example 1
Example Code:
import flash.accessibility.*;
import fl.accessibility.ButtonAccImpl;
import flash.system.Capabilities;
ButtonAccImpl.enableAccessibility();
//set accessibility properties
graph_mc.accessibilityProperties = new AccessibilityProperties();
graph_mc.accessibilityProperties.name = "Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities";
longDescBtn.accessibilityProperties = new AccessibilityProperties();
longDesc_mc.accessibilityProperties = new AccessibilityProperties();
longDesc_mc.accessibilityProperties.forceSimple = false;
hideLongDesc();
//set click handlers for button
longDescBtn.addEventListener("click", function(){showLongDesc()});
longDesc_mc.longDescCloseBtn.addEventListener("click", function(){hideLongDesc()});
function showLongDesc() {
// hide the original content from screen readers
graph_mc.accessibilityProperties.silent = true;
graph_mc.tabEnabled = false;
graph_mc.alpha = 0.2;
longDescBtn.enabled = false;
longDescBtn.accessibilityProperties.silent = true;
longDesc_mc.accessibilityProperties.silent = false;
// make the long description panel visible, both visually and to screen readers
longDesc_mc.visible = true;
longDesc_mc.tabEnabled = true;
longDesc_mc.longDescTitle.stage.focus = longDesc_mc.longDescTitle;
if (Capabilities.hasAccessibility)
Accessibility.updateProperties();
}
function hideLongDesc() {
//do the opposite to what showLongDesc does
graph_mc.accessibilityProperties.silent = false;
graph_mc.tabEnabled = true;
graph_mc.alpha = 1;
longDescBtn.enabled = true;
longDescBtn.accessibilityProperties.silent = false;
longDesc_mc.visible = false;
longDesc_mc.accessibilityProperties.silent = true;
longDesc_mc.tabEnabled = false;
longDescBtn.stage.focus = longDescBtn;
if (Capabilities.hasAccessibility)
Accessibility.updateProperties();
}
When a Flash movie contains images that require long descriptions, confirm that a longer description is made available through a separate button.
The above is true
Adobe Flash-based Content
Adobe Flash Professional version MX and higher
This technique relates to:
The objective of this technique is to validate user input as values are entered for each field, by means of client-side scripting. If errors are found, a description is added to the controls that have invalid data. Visually, the description will be placed adjacent to the control. Additionally, the error message text is added to the control's accessible description so that it is readable by assistive technology when the control receives focus.
Editorial Note: In the wiki this technique was indicated as applying to SC 3.3.4. However, don't see how that fits and removed that.
In this example, a sample form is shown with two text fields ('name' and 'zip code'). Both fields are required. When the form's submit button is pressed, the values of the text fields will be validated. If a textfield contains an invalid value, an _accProps object is created for the textfield, and its description property is set the error message.
Note: Instead of using the accessible description, the error text can also be added to the accessible name (_accProps.name), which is supported by a wider range of assistive technology than the _accProps.description property.
The results for this technique are shown in the working version of validating a text field
ActionScript 2.0 Code for Example 1
Example Code:
import flash.accessibility.*;
import mx.accessibilty.ButtonAccImpl;
import mx.controls.Alert;
import mx.accessibility.AlertAccImpl;
AlertAccImpl.enableAccessibility();
ButtonAccImpl.enableAccessibility;
resetTextFieldAccNames();
Accessibility.updateProperties();
submit_btn.addEventListener("click", handleClick);
function handleClick(e) {
//reset values
resetTextFieldAccNames();
resetTextFieldAccDescriptions();
resetErrorLabels();
//perform validation
var errors= [];
if (name_txt.text == '')
errors.push([name_txt, "You must enter your name", name_error_lbl]);
if (zipcode_txt.text == '')
errors.push([zipcode_txt, "You must enter your zip code", zipcode_error_lbl]);
else if (zipcode_txt.text.length != 5 || isNaN(zipcode_txt.text))
errors.push([zipcode_txt, "Zip code must be 5 digits", zipcode_error_lbl]);
//add validation error messages, if any
var field, errorMsg, errorLabel;
if (errors.length > 0) {
//loop over encountered errors
for (var i = 0; i < errors.length; i++) {
field = errors[i][0];
errorMsg = errors[i][1];
errorLabel = errors[i][2];
updateAccDescription(field, "Warning: " + errorMsg);
errorLabel.text = errorMsg;
}
}
else {
Alert.show("Form field values were entered correctly");
}
Accessibility.updateProperties();
}
function updateAccName(obj, newName:String) {
if (!obj._accProps)
obj._accProps = new Object();
obj._accProps.name = newName;
}
function updateAccDescription(obj, newDescription:String) {
if (!obj._accProps)
obj._accProps = new Object();
obj._accProps.description = newDescription;
}
function getAccName(obj) {
return obj._accProps ? obj._accProps.name : "";
}
function resetTextFieldAccNames() {
updateAccName(name_txt, "name, required");
updateAccName(zipcode_txt, "zip code, required");
}
function resetTextFieldAccDescriptions() {
updateAccDescription(name_txt, "");
updateAccDesciption(zipcode_txt, "");
}
function resetErrorLabels() {
name_error_lbl.text = "";
zipcode_error_lbl.text = "";
}When a Flash movie provides interactive forms that can be submitted, confirm that:
The validation warnings are placed next to the control visually.
The validation warnings are added to the accessible name or description of each control.
#1 and #2 are true
Adobe Flash-based Content
Adobe Flash Professional version MX and higher
This technique relates to:
JAWS 8.0 or later can be configured to change language automatically on the basis of the lang attribute. However, it only switches amongst major languages as indicated by the primary code. If a regional language variant is indicated with a language subcode, JAWS will use the default variant for which it is configured.
The objective of this technique is to identify the default language of the Flash content by providing the lang and/or xml:lang attribute on the HTML or object elements for the page containing the Flash. The embedded Flash content will inherit the language specified. If the entire web page uses the same language, the lang and/or xml:lang attribute can be placed on the page's HTML element, as described in H57: Using language attributes on the html element.
Since Flash inherits the language from the HTML or object element, all text within the Flash content is expected to be in that inherited language. This means that it is possible to have a Flash object in the French language on a page that is primarily in another language, or to have a page with multiple Flash objects, each in a different language. It is not possible, however, to indicate changes in the human language of content within a single Flash object using this technique.
This example defined the content of the entire web page to be in the French language. The Flash content will inherit the specified language from the HTML container.
Example Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flash Languages Examples - French</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myMovie", "9.0.115", "expressInstall.swf");
</script>
</head>
<body>
<object id="myMovie" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="myMovie.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="languages.swf" width="780" height="420">
<!--<![endif]-->
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</body>
</html>
This example defines the content of a Flash movie to be in the French language. The Flash movie is embedded using SWFObject's static publishing method. This means that there are two nested object elements, the outer to target Internet Explorer, the Inner to target other browsers. For this reason the lang and xml:lang attributes must be added twice.
Example Code:
<object id="myMovie" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420" lang="fr" xml:lang="fr">
<param name="movie" value="myMovie.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="languages.swf" width="780" height="420" lang="fr" xml:lang="fr">
<!--<![endif]-->
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
Resources are for information purposes only, no endorsement implied.
Examine the html element and the object element of the HTML document containing the reference to the SWF.
Check that the human language of the Flash content is the same as the inherited language for the object element as specified in HTML 4.01, Inheritance of language codes
Check that the value of the lang attribute conforms to BCP 47: Tags for the Identification of Languages or its successor and reflects the primary language used by the Flash content.
Check that no changes in human language occur within the Flash content
For Success Criterion 3.1.1: Checks 1-3 are all true.
For Success Criterion 3.1.2: Checks 1-4 are all true.
Adobe Flash-based Content
Adobe Flash Professional version MX and higher
This technique relates to:
The objective of this technique is to demonstrate how to provide device independence by providing equivalent event handlers in response to a mouse or focus event. Supporting both mouse and keyboard events ensures that users will be able to perceive the same information, regardless of the input device they used. If the event changes the state of the control, it may be important to change the descriptive name of the control in the event handlers.
In this example, a group of buttons is assigned the same event handlers for the flash.events.FocusEvent.FOCUS_IN and flash.events.MouseEvent.MOUSE_OVER events. When a button receives focus or is hovered over using a mouse, text describing the button will be updated.
Example Code:
import fl.accessibility. ButtonAccImpl;
import fl.controls.Button;
import flash.accessibility.*
import flash.events.FocusEvent;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
ButtonAccImpl.enableAccessibility();
var states:Object = {
"Alabama" : "Alabama is a state located in the southeastern region of the United States of America.",
"California" : "California is the most populous state in the United States",
"New York" : "New York is a state in the Mid-Atlantic and Northeastern regions of the United States"
};
var buttons:Array = [];
var button:Button;
var accProps:AccessibilityProperties;
var count = 0;
for (var i in states) {
button = new Button();
button.label = i;
button.addEventListener(MouseEvent.CLICK, clickHandler);
button.addEventListener(MouseEvent.MOUSE_OVER, highlightHandler);
button.addEventListener(MouseEvent.MOUSE_OUT, unHighlightHandler);
button.addEventListener(FocusEvent.FOCUS_IN, highlightHandler);
button.addEventListener(FocusEvent.FOCUS_OUT, unHighlightHandler);
accProps = new AccessibilityProperties();
accProps.description = states[i];
button.accessibilityProperties = accProps;
addChild(button);
button.x = 30
button.y = 30 + count * 30;
buttons[i] = button;
count++;
}
function highlightHandler(e) {
descText.text = states[e.target.label];
}
function unHighlightHandler(e) {
descText.text = "";
}
function clickHandler(e) {
var url:URLRequest = new URLRequest("http://www.wikipedia.org/wiki/" + e.target.label);
navigateToURL(url, "_self");
}
Note: To improve accessibility for screen reader users, the descriptive text is also attached to the buttons themselves as an accessible description. Also note that for button components, the MouseEvent.CLICK event will fire on mouse clicks as well as when the Enter key is pressed.
This technique is illustrated in the working version of example 1
For all scripted event handlers in a Flash Movie,
Confirm that event handlers are assigned for both mouse and keyboard events
The above is true
Adobe Flash-based Content
Adobe Flash Professional version MX and higher
This technique relates to:
The objective of this technique is to control the Flash Movie's reading order by assigning tabIndex values to its elements.
The reading order is the order in which a screen reader reads information about the object. This is not necessarily the same as the tab oder, which only contains keyboard focusable elements. However, in Flash both the reader order and tab order can be controlled through the tab index order. Flash Player uses a default tab index order from left to right and top to bottom. To create a custom reading order, assign a tab index value to every instance on the stage, either through action script or through the Accessibility Panel. Create a tabindex value for every accessible object, not just the focusable objects. For example, dynamic text must have tab indexes, even though a user cannot tab to dynamic text.
To add a tabindex value using the Accessibility Panel, perform the following steps for every accessible object on the stage:
Select the element by clicking on it.
In the Accessibility Panel, enter a numeric value in the "Tab index" field. The value must be a positive integer (up to 65535) that reflects the order in which the selected object should be read. Elements with higher tab index values will be read after elements with lower values. If two or more objects have the same tab index in any given frame, Flash follows the order in which the objects were placed on the Stage.
To visualize the currently defined tab order, select View > Show Tab Order. Tab index numbers for individual objects appear in the upper-left corner of the object.
These steps are illustrated in the screenshots below
Note: Note: Flash Player no longer requires that you add all of the objects in a FLA file to a list of tab index values. Even if you do not specify a tab index for all objects, a screen reader reads each object correctly.
This example contains dynamic TextField instances that are grouped into columns. To ensure the reading order follows the column structure. The TextField instances are given a tab index value that corresponds to their textual content (for example, the TextField containing the text "Sample Text 3" has a tabindex value of 3. Additionally, a single TextField is added that has no tabindex value set. This field contains the text "Not in tab order". Even though this field is visually placed between sample text 2 and 3, it is placed at the end of the custom tab order because it is not assigned a tabindex value.
The results can be found in the working version of example 1
Use a screen reader to navigate through the Flash movie, one element at a time.
Check that the order in which the screen reader announces the content, matches the logical visual order.
#2 is true.
Adobe Flash-based Content
Adobe Flash Professional version MX and higher
This technique relates to:
The objective of this technique is to demonstrate how to invoke a scripting function in a way that is keyboard accessible by attaching it to keyboard-accessible, standard Flash components provided by the Adobe Flash Profressional authoring tool. In order to ensure that scripted actions can be invoked from the keyboard, they are associated with standard Flash components such as the Button component. The click event of these components is device independent. While the "CLICK" event is a mouse event, it is actually mapped to the default action of a button. The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits the space key, and when the element is triggered via the accessibility API.
This example shows a button that uses the MouseEvent.CLICK event to change its label. This event will fire both on mouse click and when the space key is pressed
This approach is demonstrated in the working version of click event on a button
Example Code:
import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;
ButtonAccImpl.enableAccessibility();
var testBtn = new Button();
testBtn.label = "click me";
testBtn.addEventListener(MouseEvent.CLICK, clickHandler, false);
addChild(testBtn);
testBtn.x = testBtn.y = 10;
function clickHandler(e) {
e.target.label = "Thanks";
}
Editorial Note: The wiki source for FLASH16 indicated there was an action to add a second example.
When a Flash Movie contains interactive controls, confirm that:
Standard Flash components are used for the controls
The controls use the "click" event
#1 and #2 are true