Adobe Animate CC software offers the most powerful tools available for the development of accessible rich media. Whether using ActionScript® or the Accessibility panel in Animate CC, creating accessible content can be quick and easy. Using text and text equivalents, Flash designers and developers can create engaging and exciting content for users of screen readers and other assistive technologies.

At the same time, the screen reader environment poses new challenges. Just as designers and developers are mindful of the user experience in a browser or a standalone environment, it is important that they consider how users of assistive technologies such as screen readers will interact with content created with Animate CC.

Using Microsoft Active Accessibility (MSAA), Adobe Flash Player 11 software exposes content created with Flash to the screen reader. Text contained within a movie is exposed by default; however, graphic elements are not exposed automatically. As in HTML, graphic elements require a text equivalent that is read by the screen reader in place of the image. Using ActionScript or the Accessibility panel in Animate CC, designers and developers can easily assign text equivalents for elements in rich media content. In most cases, the greatest challenge is deciding when to use text equivalents and what they should say.

This page explains when and how to use the Accessibility panel in Animate CC to add text equivalents to elements of a movie.

Text in flash Player 11

By default, Flash Player 11 exposes all text elements to the screen reader user. Designers and developers do not need to make any modifications. In the example below, the text was added to the stage, and a screen reader would read the text as "Clear-ly tasty!" without any developer effort.


Adding text equivalents in Animate CC

Now, take a look at another example that will require a text equivalent. In the example below, what is called the Adobe Flash logotype is displayed. The logotype, displaying the words "Adobe Animate CC" is not actually text, but a graphic.

Adobe Animate CC

Since the logotype is not text, a screen reader will not read it. In this case, a text equivalent should be provided. To add a text equivalent, use the Accessibility panel. First, make sure the logo is selected. Before a text equivalent is added to this item, the object must be saved as a symbol in the library. Since text equivalents are not supported for graphic symbols, save the object as a movie symbol or a button.

In earlier versions of Flash Professional CC, you could press Shift+F11 to bring the Accessibility panel to the front, but in Flash Professional CC, the Accessibility panel is included within the Properties panel. To bring the Properties panel to the front, press Ctrl+F3.

Adobe Animate

Notice the two fields titled "Name" and "Description." In general terms, the Name field is used for shorter text equivalents, and the Description field is used for longer ones. (This parallels the use of the alt and longdesc attributes in HTML.) In more practical terms, the difference is less important since screen readers read both by default.

Deciding on the proper text equivalent is not always easy. In most cases, it is wise to consider the purpose of the image rather than giving it a merely literal description. In the example above, a description may read, "A plastic bottle containing a clear liquid." This will not be particularly helpful information to a screen reader user. In contrast, the text "Aquo Clear" might be a more meaningful equivalent for the logo since it is part of an advertising feature for this product.

In this case, a description would not likely be necessary. Descriptions are best used when the text equivalent needs to be longer than about 50 characters. One thing to keep in mind is that the description is generally read following the name. If the content does not flow when the two are read together, the designer/developer may choose not to use a name, only a description of the object.

Accesible movie elements

By default, Animate CC can make text, input text fields, buttons, movie clips, and even entire movies accessible. While text elements do not require modification by the designer/developer, other elements do. Designers and developers can use the Accessibility panel in Flash Professional CC to add a text equivalent or even to hide elements from assistive technologies.

In the example below, the movie shows a moon orbiting a planet. In this case, it is not appropriate to provide a text equivalent for the moon and the planet separately. Instead, the relationship between these two elements needs to be conveyed.

To provide a single text equivalent for the entire movie, first make sure that nothing in the movie is selected. In the Name field, add the text equivalent "Moon orbiting planet." The name may differ depending on the context, but this equivalent will suffice for this example. Note that the text equivalent conveys not only the contents of the movie but also how the separate elements relate to one another.

To group the contents of the movie together formally, deselect Make Child Objects Accessible. This step tells the screen reader to use this text equivalent for the entire movie.

Accesible movie elements