Adobe Animate CC software provides a powerful set of tools for creating animations and interactive content and applications. These tools allow designers and developers to create demonstrations of complex visual relationships, engaging interactions in buttons and movies, and attractive interfaces in websites and web applications. Most assistive technologies, however, are not designed with these types of animations in mind. While working in Animate CC, designers and developers need to be mindful of the ways in which assistive technologies such as screen readers will interact with their movies. Find out how to optimize accessibility when creating animation.

Understanding how assistive technologies handle animation

When a screen reader encounters content created with Animate CC, it loads the current state of the movie and notifies the user. With the Window-Eyes screen reader, the user hears, "Loading…load done." Once a piece of content has been read, the screen reader moves on to read other parts of the content and the rest of the page.

A unique feature of content created with Animate CC is that it may change over time. As the content changes, Adobe Flash Player 11 software sends a signal to the screen reader notifying it that there has been a change. When the screen reader receives this notification, it automatically returns to the top of the page and begins reading it again.

The following example illustrates the serious implications of content created without consideration for users of screen readers. A poorly designed banner ad placed at the top of the page might loop constantly through a few frames. When Flash Player encounters this banner, it will send repeated notifications to the screen reader of changes in the content, and the screen reader will continually return to the top of the page. This problem can seriously erode the experience for screen reader users.

To address this specific issue, Adobe worked with GW Micro to create a Halt Flash Events keystroke (Alt+Shift+M) for the Window-Eyes screen reader. This keystroke allows a screen reader user to suspend Flash notifications on the page. Pressing the keystroke again allows the user to resume Flash notifications.

Providing text equivalents for entire movies

A better solution for handling animation is simply to hide the animation from assistive technologies. Animate CC allows designers and developers to assign a text equivalent for an entire movie or for a collection of objects within a movie. Designers and developers might choose to provide a text equivalent for content for one of two reasons.

Animations are often used to illustrate visual relationships among elements on the screen. Adding text equivalents to the individual elements may not provide a sufficient description of the relationships among the elements. For example, in an animation of the solar system, a designer/developer might add text equivalents to the planets; however, these text equivalents would not convey information about how the planets move in relation to one another. A text equivalent for the entire movie could provide a better description of this relationship.


 Providing text equivalents for entire movies

Making child objects inaccessible

Notice in the example above that the option "Make child objects accessible" has been deselected. This serves two valuable purposes. First, it serves to group these elements formally as a single element. From a testing standpoint, this makes the movie easier to evaluate for accessibility. Second and more important, it hides the motion from screen readers. By making the child objects of this sample movie inaccessible, the designer/developer is effectively telling the screen reader to ignore everything within the movie. As a result, this movie will not send the constant updates to the screen reader that cause the screen reader to keep looping.

Avoiding constant motion

An important consideration for accessible animation relates to constant motion on the screen. While it is popular to include motion in movies as part of transitions and loading sequences, it is important that these animations settle to a static screen once the page loads. For people with learning disabilities, motion on the screen can be distracting and might even make other elements unreadable.