About accessible content

Accessibility overview

You can create content that is accessible to all users, including those with disabilities, using the accessibility features that Adobe Animate provides in the authoring environment user interface, taking advantage of ActionScript® designed to implement accessibility. As you design accessible Animate applications, consider how users might interact with the content and follow recommended design and development practices.

Worldwide accessibility standards

Many countries have adopted accessibility standards
based on the standards developed by the World Wide Web Consortium
(W3C). The W3C publishes the Web Content Accessibility Guidelines,
a document that prioritizes actions designers should take to make
web content accessible. For information about the Web Accessibility
Initiative, see the W3C website at w3.org.

In the United States, the law that governs accessibility is commonly
known as Section 508, which is an amendment to the U.S. Rehabilitation
Act.

For additional information about Section 508, see the following
websites:

Understanding screen reader technology

Screen readers are software applications that visually impaired users can use to navigate a website and read the web content aloud. To enable a screen reader to read nontextual objects in your application, such as vector art and animations, use the Accessibility panel to associate a name and description with the object. The keyboard shortcuts you define can allow users to use the screen reader to navigate through your document with ease.

To expose graphic objects, use the Accessibility panel or ActionScript to provide a description.

You cannot control how any screen reader behaves; you can control only the content, which you can mark up in your Animate applications to expose the text and ensure that screen reader users can activate the controls. You decide which objects in the Animate application are exposed to screen readers, provide descriptions for them, and decide the order in which they are exposed to screen readers. You cannot force screen readers to read specific text at specific times or control the manner in which that content is read. Test your applications with a variety of screen readers to ensure that they perform as you expect.

Sound is the most important medium for most screen reader users. Consider how any sound in your document interacts with the text spoken aloud by screen readers. It might be difficult for screen reader users to hear what their screen readers are saying if your Animate application contains loud sounds.

Platform requirements

You can only create Animate content designed for use with screen readers with Windows platforms. Viewers of Animate content must have Macromedia Flash® Player 6 from Adobe or later and Internet Explorer on Windows 98 or later.

Animate and Microsoft Active Accessibility (Windows only)

Flash Player is
optimized for Microsoft Active Accessibility (MSAA), which provides
a descriptive and standardized way for applications and screen readers to
communicate. MSAA is available only for Windows operating systems.
For more information on Microsoft Accessibility Technology, visit
the Microsoft Accessibility website at www.microsoft.com/enable/default.aspx.

The Windows ActiveX
(Internet Explorer plug‑in) version of Flash Player 6 supports MSAA,
but Windows Netscape and Windows stand-alone players do not.

Note:

MSAA is currently not supported in the opaque windowless and transparent windowless modes. (These modes are options in the HTML Publish Settings panel, available for use with the Windows version of Internet Explorer 4.0 or later, with the Animate ActiveX control.) To make your Animate content accessible to screen readers, avoid using these modes.

Flash Player makes information about the following types of accessibility
objects available to screen readers that use MSAA.

Dynamic or static text

The principal property of a text object is its name. To comply with MSAA conventions, the name is equal to the contents of the text string. A text object can also have an associated description string. Animate uses the static or dynamic text immediately above or to the left of an input text field as a label for that field.

note: Any text that is a label is not passed to a screen reader, but is used as the name of the object that it labels. Labels are never assigned to buttons or text fields that have author-supplied names.

Input text fields

Have a value, an optional name, a description string, and
a keyboard shortcut string. An input text object’s name can come
from a text object that is above or to the left of it.

Buttons

Have a state (pressed or not pressed), support a programmatic default action that causes the button to depress momentarily, and optionally have a name, a description string, and a keyboard-shortcut string. Animate uses any text entirely inside a button as a label for that button.

note: For accessibility purposes, Flash Player considers movie clips used as buttons with button event handlers such as onPress to be buttons, not movie clips.

Components

Provide special accessibility implementation.

Movie clips

Exposed to screen readers as graphic objects when they do not contain any other accessible objects, or when you use the Accessibility panel to provide a name or a description for a movie clip. When a movie clip contains other accessible objects, the clip itself is ignored, and the objects inside it are made available to screen readers.

note: All Animate Video objects are treated as simple movie clips.

Basic accessibility support in
Flash Player

By default, the following objects are defined as accessible in all Animate documents and are included in the information that Flash Player provides to screen reader software. This generic support for documents that do not use any accessibility features includes the following:

Dynamic or static text

Text is transferred to the screen reader program as a name,
but with no description.

Input text fields

Text is transferred to the screen reader. No names are transferred,
except where a labeling relationship is found for the input text,
such as a static text field positioned close to the input text field.
No descriptions or keyboard shortcut strings are transferred.

Buttons

The state of the button is transferred to the screen reader.
No names are transferred, except where labeling relationships are
found, and no descriptions or keyboard shortcut strings are transferred.

Documents

The document state is transferred to the screen reader, but
with no name or description.

Accessibility for hearing-impaired
users

Include captions for audio content that is integral to comprehending the material. A video of a speech, for example, might require captions for accessibility, but a quick sound associated with a button probably wouldn’t.

Methods to add captions to a Animate document include the following:

Add text as captions, ensuring that the captions are synchronized with the audio in the Timeline.

Use Hi-Caption Viewer, a component available from Hi Software that works with Hi-Caption SE for use with Animate. Captioning Macromedia Animate Movies with Hi-Caption SE, a white paper, explains how to use Hi-Caption SE and Animate together to create a captioned document.

Provide animation accessibility
for the visually impaired

You can change the property of an accessible object during SWF file playback. For example, to indicate changes that take place on a keyframe in an animation. However, different vendor’s screen readers treat new objects on frames differently. Some screen readers might read only the new object, whereas other screen readers might re‑read the entire document.

To reduce the chance of causing a screen reader to emit extra “chatter” that can annoy users, avoid animating the text, buttons, and input text fields in your document. Also, avoid making your content loop.

Flash Player can’t determine the actual text content of features such as Text Break Apart to animate text. Screen readers can only provide accurate accessibility to information-carrying graphics such as icons and gestural animation, if you provide names and descriptions for these objects in your document or for the entire Animate application. You can also add supplementary text to your document or shift important content from graphics to text.

Select the object for which you want to change
the accessibility properties.

Select Window > Other Panels >
Accessibility.

Change the properties for the object.

Alternatively, use ActionScript to update accessibility
properties.

Testing accessible content

When you test your accessible Animate applications, follow these recommendations:

Download several screen readers and test your application by playing it in a browser with the screen reader enabled. Check that the screen reader is not attempting to “talk over” places in your document where you inserted separate audio. Several screen reader applications provide a demonstration version of the software as a free download; test as many screen readers as you can to ensure compatibility across screen readers.

Test interactive content and verify that users can navigate your content effectively using only the keyboard. Different screen readers work in different ways when processing input from the keyboard; your Animate content might not receive keystrokes as you intended. Test all keyboard shortcuts.

Using Animate to enter accessibility information for screen readers

Animate for screen readers and accessibility

Screen readers read aloud a description of the content, read text, and assist users as they navigate through the user interfaces of traditional applications such as menus, toolbars, dialog boxes, and input text fields.

By default, the following objects are defined as accessible in all Animate documents and are included in the information that Flash Player provides to screen reader software:

Dynamic text

Input text fields

Buttons

Movie clips

Entire Animate applications

Flash Player automatically provides names for static and dynamic text objects, which are the contents of the text. For each of these accessible objects, you can set descriptive properties for screen readers to read aloud. You can also control how Flash Player decides which objects to expose to screen readers—for example, you can specify that certain accessible objects are not exposed to screen readers at all.

If you select an object on the Stage, you can make that object accessible and specify options and tab order for the object. For movie clips, you can specify whether child object information is passed to the screen reader (the default when you make an object accessible).

With no objects selected on the Stage, use the Accessibility panel to assign accessibility options for an entire Animate application. You can make the entire application accessible, make child objects accessible, have Animate label objects automatically, and give specific names and descriptions to objects.

All objects in Animate documents must have instance names for you to apply accessibility options to them. Create instance names for objects in the Property inspector. The instance name is used to refer to the object in ActionScript.

The following options are available in the Accessibility panel:

Make Object Accessible

(Default) Instructs Flash Player to pass
the accessibility information for an object to a screen reader.
When the option is disabled, accessibility information for the object
is not passed to screen readers. Disabling this option as you test
content for accessibility can be useful because some objects might
be extraneous or decorative and making them accessible could produce confusing
results in the Screen Reader. You can then apply a name manually
to the labeled object, and hide the labeling text by deselecting
Make Object Accessible. When Make Object Accessible is disabled,
all other controls on the Accessibility panel are disabled.

Make Child Objects Accessible

(Movie clips only;
Default) Instructs Flash Player to pass child object information
to the screen reader. Disabling this option for a movie clip causes
that movie clip to appear as a simple clip in the accessible object
tree, even if the clip contains text, buttons, and other objects.
All objects in the movie clip are then hidden from the object tree.
This option is useful mainly for hiding extraneous objects from
screen readers.

note: If a movie clip is used as a button—it
has a button event handler assigned to it, such as onPress or onRelease—the
Make Child Objects Accessible option is ignored because buttons
are always treated as simple clips, and their children are never
examined, except in the case of labels.

Auto Label

Instructs Animate to automatically label objects on the Stage with the text associated with them.

Name

Specifies the object name. Screen readers identify objects
by reading these names aloud. When accessible objects don’t have
specified names, a screen reader might read a generic word, such
as Button, which can be confusing.

Note: Do not confuse object names specified in
the Accessibility panel with instance names specified in the Property
inspector. Giving an object a name in the Accessibility panel does
not give it an instance name.

Description

Lets you enter a description of the object to the screen
reader. The screen reader reads this description.

Shortcut

Describes keyboard shortcuts to the user.
The screen reader reads the text in this text field. Entering keyboard
shortcut text here does not create a keyboard shortcut for the selected
object. You must provide ActionScript keyboard handlers to create
shortcut keys.

Tab Index ( only)

Creates a tab order in which objects are accessed when the
user presses the tab key. The tab index feature works for keyboard
navigation through a page, but not for screen reader reading order.

Selecting names for buttons, text
fields, and entire SWF applications

Use
the Accessibility panel in the following ways to assign names to
buttons and input text fields so that the screen reader identifies
them appropriately:

Use the auto label feature to assign text adjacent or in the object as a label.

Enter a specific label in the Accessibility panel name field.

Animate automatically applies the name that you place on top of, in, or near a button or text field as a text label. Labels for buttons must appear within the bounding shape of the button. For the button in the following example, most screen readers would first read the word button, then read the text label Home. The user can press Return or Enter to activate the button.

A form might include an input text field where users enter their names. A static text field, with the text Name appears next to the input text field. When Flash Player discovers such an arrangement, it assumes that the static text object serves as a label for the input text field.

For example, when the following part of a form is encountered, a screen reader reads “Enter your name here.”

In the Accessibility panel, turn off automatic labeling if it is not appropriate for your document. You can also turn off automatic labeling for specific objects in your document.

Provide a name for an object

You can turn off automatic labeling for
part of an application and provide names for the objects in the
Accessibility panel. If you have automatic labeling turned on, you
can select specific objects and provide names for the objects in
the Name text field in the Accessibility panel so that the name
is used instead of the object text label.

When a button
or input text field doesn’t have a text label, or when the label
is in a location that Flash Player can’t detect, you can specify
a name for the button or text field. You can also specify a name
if the text label is near a button or text field, but you don’t
want that text to be used as that object’s name.

In the following
example, the text that describes the button appears outside and to
the right of the button. In this location, Flash Player does not
detect the text, and the screen reader does not read it.

To
correct this situation, open the Accessibility panel, select the
button, and enter the name and description. To prevent repetition,
make the text object inaccessible.

Note:

An object’s accessibility name is unrelated to the ActionScript instance name or ActionScript variable name associated with the object. (This information generally applies to all objects.) For information on how ActionScript handles instance names and variable names in text fields, see About text field instance and variable names in Learning ActionScript 2.0 in Adobe Animate at www.adobe.com/go/learn_cs5_learningas2_en.

Specify a name and description
for a button, text field, or entire SWF application

Do
one of the following:

To provide a name for a button or text field, select the object on the Stage.

To provide a name for an entire Animate application, deselect all objects on the Stage.

Select Window > Other Panels >
Accessibility.

Select either Make Object Accessible (for buttons or text fields) or the default, Make Movie Accessible (for entire Animate applications).

Enter a name and description for the button, text field, or Animate application.

Define accessibility for a selected
object in a SWF application

Select Window > Other
Panels > Accessibility.

Do
one of the following:

Select Make Object Accessible (the default
setting) to expose the object to screen readers and to enable other
options in the panel.

Deselect Make Object Accessible to hide the object
from screen readers and disable the other options in the panel.

Enter
a name and a description for the selected object as needed:

Dynamic text

To provide a description for static text, you must convert
it to dynamic text.

Input text fields or buttons

Enter a keyboard shortcut.

Movie clips

Select
Make Child Objects Accessible to expose the objects inside the movie
clip to screen readers.

note: If you can describe your application
in a simple phrase that a screen reader can easily convey, turn
off Make Children Accessible, and type a suitable description.

Make an entire SWF application
accessible

After a Animate document is complete and ready to be published or exported, make the entire Animate application accessible.

Deselect all elements in the document.

Select Window > Other Panels >
Accessibility.

Select
Make Movie Accessible (the default setting) to expose the document
to screen readers.

Select or deselect Make Children Accessible to expose
or omit any accessible objects in the document to screen readers.

If
you selected Make Movie Accessible in step 2, enter a name and description for
the document as needed.

Select
Auto Label (the default setting) to use text objects as automatic
labels for accessible buttons or input text fields contained in
the document. Deselect this option to turn off automatic labeling
and expose text objects to screen readers as text objects.

Viewing and creating tab order
and reading order

The
two aspects to tab indexing order are the tab order in
which a user navigates through the web content and the order in
which things are read by the screen reader, called the reading
order.

Flash Player uses a tab index
order from left to right and top to bottom. Customize both the tab
and reading order by using the tabIndex property
in ActionScript (in ActionScript, the tabIndex property
is synonymous with the reading order).

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.

Tab order

The order in which objects receive input focus when users press the Tab key. Use ActionScript to create the tab order, or if you have Adobe Animate, use the Accessibility panel. The tab index that you assign in the Accessibility panel does not necessarily control the reading order.

Reading order

The order in which a screen reader reads information about
the object. To create a reading order, use ActionScript to assign
a tab index to every instance. Create a tab-order index 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. If you do not create a tab index for every accessible
object in a given frame, Flash Player ignores all tab indexes for that
frame whenever a screen reader is present, and uses the default
tab ordering instead.

Create a tab-order index for keyboard
navigation in the Accessibility panel

You
can create a custom tab-order index in the Accessibility panel for
keyboard navigation for the following objects:

Dynamic text

Input text

Buttons

Movie clips, including compiled movie clips

Components

Screens

note: You can also use ActionScript code to create a tab-order index for keyboard navigation.

When you move tab-indexed objects that are user-defined in your document, or to another document, Animate retains the index attributes. Check for and resolve index conflicts (for example, two different objects on the Stage with the same tab-index number).

Note: If two or more objects have the same tab index in any given frame, Animate follows the order in which the objects were placed on the Stage.

Select the object in which to assign a tab order.

Select Window > Other Panels >
Accessibility.

If you’re providing an index for the selected object
only, in the Tab Index text field, enter a positive integer (up
to 65535) that reflects the order in which the selected object should
receive focus.

To
view a tab order, select View > Show Tab Order. Tab
index numbers for individual objects appear in the upper-left corner
of the object.

Tab index numbers

Note:

Tab indexes created with ActionScript code do not appear
on the Stage when the Show Tab Order option is enabled.

Specifying advanced accessibility
options for screen readers

Turn off automatic labeling and
specify an object name for screen readers

On the Stage,
select the button or input text field for which you want to control labeling.

Select Window > Other Panels >
Accessibility.

Select Make Object Accessible (the default setting).

Enter a name for the object. The name is read as the
label for the button or text field.

To turn off accessibility for the automatic label (and
hide it from screen readers), select the text object on the Stage.

Hide an object from the screen
reader

You can hide a selected object from screen readers, and you can decide to hide accessible objects that are contained inside a movie clip or Animate application and expose only the movie clip or Animate application to screen readers.

note: Only hide objects that are repetitive or convey no content.

When an object is hidden, the screen reader ignores the object.

On the Stage, select the button or input text
field to hide from the screen reader.

Select Window > Other Panels >
Accessibility.

In the Accessibility panel, do one of the following:

If the object is a movie clip, button,
text field, or another object, deselect Make Object Accessible.

If the object is the child of a movie clip, deselect
Make Child Objects Accessible.

Create a keyboard shortcut to an
object for screen readers

You can create a keyboard shortcut for an object, such as a button, so users can navigate to it without listening to the contents of an entire page. For example, you can create a keyboard shortcut to a menu, a toolbar, the next page, or a submit button.

To create a keyboard shortcut, write ActionScript code for an object. If you provide a keyboard shortcut for an input text field or button, you must also use the ActionScript Key class to detect the key the user presses during Animate content playback. See Key in the ActionScript 2.0 Language Reference. See Capturing keypresses in Learning ActionScript 2.0 in Adobe Animate at www.adobe.com/go/learn_cs5_learningas2_en.

Select the object and add the name of the keyboard shortcut to the Accessibility panel so the screen reader can read it.

Test your Animate content with multiple screen readers. Keyboard shortcut functionality also depends on the screen reader software used. The key combination Control+F, for example, is a reserved keystroke for both the browser and the screen reader. The screen reader reserves the arrow keys. Generally, you can use the 0 to 9 keys on the keyboard for keyboard shortcuts, however, screen readers increasingly use even these keys.

Create a keyboard shortcut

On the Stage, select the button or input
text field to create a keyboard shortcut for.

Select Window > Other Panels >
Accessibility.

In the Shortcut field, type the name of the keyboard
shortcut, using the following conventions:

Spell out key names, such as Control or
Alt.

Use capital letters for alphabetic characters.

Use a plus sign (+) between key names, with no spaces
(for example, Control+A).

Note:

Animate does not check that the ActionScript to code the keyboard shortcut was created.

Map a keyboard shortcut to a button
instance Control+7 to myButton instance

Select the object on the Stage, display
the Accessibility panel, and in the Shortcut field, type the key
combination of the shortcut. For example, Control+7.

The example assigns the Control+7 keyboard shortcut
to a button with an instance name of myButton and makes information
about the shortcut available to screen readers. In this example,
when you press Control+7, the myOnPress function
displays the text “hello” in the Output panel. See addListener (IME.addListener
method) in ActionScript 2.0 Language Reference at www.adobe.com/go/learn_cs5_as2lr_en.

Creating accessibility with ActionScript

About ActionScript and accessibility

You
can create accessible documents with ActionScript® code.
For accessibility properties that apply to the entire document,
you can create or modify a global variable called _accProps.
See the _accProps property in ActionScript 2.0 Language Reference at www.adobe.com/go/learn_cs5_as2lr_en.

For properties that apply to a specific object, you can use the
syntax instancename._accProps. The value of _accProps is
an object that can include any of the following properties:

Property

Type

Equivalent selection in the Accessibility
panel

Applies to

.silent

Boolean

Make Movie Accessible/Make Object Accessible (inverse
logic)

Entire documents

Buttons

Movie
clips

Dynamic text

Input text

.forceSimple

Boolean

Make Child Objects Accessible (inverse logic)

Entire documents

Movie clips

.name

string

Name

Entire documents

Buttons

Movie
clips

Input text

.description

string

Description

Entire documents

Buttons

Movie
clips

Dynamic text

Input text

.shortcut

string

Shortcut

Buttons

Movie clips

Input text

Note:

With inverse logic, a value of true in ActionScript
corresponds to a check box that is not selected in the Accessibility
panel, and a value of false in ActionScript corresponds
to a selected check box in the Accessibility panel.

Modifying the _accProps variable has no effect by itself. You must also use the Accessibility.updateProperties method to inform screen reader users of Animate content changes. Calling the method causes Flash Player to re‑examine all accessibility properties, update property descriptions for the screen reader, and, if necessary, send events to the screen reader that indicate changes have occurred.

When updating accessibility properties of multiple objects at once, include only a single call to Accessiblity.updateProperties (too frequent updates to the screen reader can cause some screen readers to become too verbose).

To create Animate content that behaves in a specific way if a screen reader is active, use the Accessibility.isActive() ActionScript method, which returns a value of true if a screen reader is present, and false otherwise. You can then design your Animate content to perform so that it’s compatible with screen reader use (for example, by hiding child elements from the screen reader). For more information, see the Accessibility.isActive method in the ActionScript 2.0 Language Reference at www.adobe.com/go/learn_cs5_as2lr_en.

For example, you could use the Accessibility.isActive() method to decide whether to include unsolicited animation. Unsolicited animation happens without the screen reader doing anything, which can be confusing for screen readers.

The Accessibility.isActive() method provides asynchronous communication between the Animate content and Flash Player; a slight real-time delay can occur between the time the method is called and the time when Flash Player becomes active, returning an incorrect value of false. To ensure that the method is called correctly, do one of the following:

Instead of using the Accessibility.isActive() method when the Animate content first plays, call the method whenever you need to make a decision about accessibility.

Introduce a short delay of one or two seconds at the beginning of your document to give the Animate content enough time to contact Flash Player.

For example, you can use an onFocus event to attach this method to a button. This approach generally gives the SWF file enough time to load and you can assume a screen reader user will tab to the first button or object on the Stage.

Use ActionScript to create a tab
order for accessible objects

To create the tab order
with ActionScript® code, assign the tabIndex property to
the following objects:

Dynamic text

Input text

Buttons

Movie clips, including compiled movie clips

Timeline frames

Screens

Provide a complete tab order for
all accessible objects. If you create a tab order for a frame and
you don’t specify a tab order for an accessible object in the frame, Flash
Player ignores all the custom tab-order assignments. Additionally,
all objects assigned to a tab order, except frames, must have an
instance name specified in the Instance Name text field of the Property
inspector. Even items that are not tab stops, such as text, need
to be included in the tab order if they are to be read in that order.

Because
static text cannot be assigned an instance name, it cannot be included in
the list of the tabIndex property values. As a
result, a single instance of static text anywhere in the SWF file
causes the reading order to revert to the default.

To specify
a tab order, assign an order number to the tabIndex property,
as the following example shows:

You
can also use the tabChildren() or tabEnabled() methods
to assign custom tab order. See MovieClip.tabChildren, MovieClip.tabEnabled,
and TextField.tabEnabled in the ActionScript 2.0 Language Reference at www.adobe.com/go/learn_cs5_as2lr_en.

Using accessible components

A core set of UI components accelerates building accessible applications. These components automate many of the most common accessibility practices related to labeling, keyboard access, and testing and help ensure a consistent user experience across rich applications. Animate includes the following set of accessible components:

SimpleButton

CheckBox

RadioButton

Label

TextInput

TextArea

ComboBox

ListBox

Window

Alert

DataGrid

For each accessible component, enable the accessible portion of the component with the enableAccessibility() command. This command includes the accessibility object with the component as the document is compiled. Because no simple way exists to remove an object after it is added to the component, these options are disabled by default. Therefore, it’s important that you enable accessibility for each component. Perform this step only once for each component; you do not need to enable accessibility for each instance of a component for a given document. See “Button component”, “CheckBox component”, “ComboBox component”, “Label component”, “List component”, “RadioButton component”, and “Window component” in the ActionScript 2.0 Components Language Reference at www.adobe.com/go/learn_cs5_as2lr_en.

Twitter™ and Facebook posts are not covered under the terms of Creative Commons.