Adobe Animate CC software allows designers and developers to create powerful web applications that are exciting, engaging, and accessible to all. With the new features incorporated into Adobe Flash Player 11 and Animate CC software, users of assistive technologies can now access the best experience on the web.
Designing accessible content requires designers and developers to pay attention to the user experience. Since many Animate CC designers and developers are not familiar with the capabilities of screen readers and other assistive technologies, these design guidelines provide several desirable practices for creating content in Animate CC. These hints are intended to provide a helpful starting point for designers and developers striving to create accessible content in Animate CC.
The following are some practical suggestions for optimizing the accessibility of your rich media content.
- Assign text equivalents
- Use accessible components
- Enable control over reading order
- Facilitate keyboard access to all controls
- Provide captions
- Provide accessible video controls
- Enable control over audio playback
- Expose structure
- Expose state of controls
- Use color wisely
- Validate for accessibility
Provide text equivalents for graphic elements in Animate CC. Provide names for graphic icons. Add text equivalents for gesturing animations that highlight an area of the page. When you use a feature such as Break Apart for text, be sure to provide a name or description. When a group of related graphic elements are used to convey a single idea, provide a single text equivalent and make the child objects inaccessible. Learn more about providing text equivalents.
Make looping elements inaccessible
Movies that never stop moving cause screen readers to refresh frequently. Even in cases where the movies are at the bottom of a page, the screen reader can interpret motion as an update to the page and return to the top and start reading again. For this reason, child objects of movie clips or entire movies should be made inaccessible. Learn more about handling animation.
Allow users to control motion
Try not to present information in your movie that remains on the screen for only a short time. Screen readers may have a difficult time keeping up with quick changes in movies. You can resolve this type of problem by adding Next buttons that control movement. Learn more about handling animation.
A core set of accessible user interface components is provided in Animate CC to help you with accessible application development. These components can 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. For each component, the designer or developer only needs to enable the accessibility object by using the command enableAccessibility(). This includes the accessibility object with the component as the movie is compiled. Learn more about components and accessibility.
The default reading order of a movie created with Animate CC may not follow the same order that the designer would expect based on the visual layout. There are at least three means of controlling reading order. First, the designer or developer can limit the physical size of the stage and keep the layout simple. Second, the designer or developer can develop a secondary control that places a linear version of the content offstage. Third, the reading order can be specified using ActionScript®. Learn more about controlling reading order.
When adding buttons and other controls to movies, make sure that users can navigate through your movie effectively using only the keyboard. Keep in mind that applications need to be tested both with and without a screen reader. To facilitate keyboard access, try to keep scripts within frames as opposed to attaching them directly to objects. Also, avoid using empty movie clips as buttons. These "hit areas" are not recognized by screen readers. Finally, add keyboard shortcuts to commonly used buttons to promote access. Learn more about facilitating keyboard access.
Animate CC makes delivering audio content simple, and now delivering closed captions for users who are deaf or hard of hearing is easier than ever. Several tools and professional services are available to assist Flash developers in creating or obtaining a TTML caption data file for a video. Learn more about captions.
Video playback controls need to be accessible for blind, low-vision, and keyboard-only users. Flash Professional CC provides built-in support for accessibility video player skins. Learn more about accessible video controls.
Music and audio that plays as the site loads presents a serious challenge to screen reader users. The audio from a movie can interfere with the end user's ability to hear the contents of a movie using a screen reader. As a result, it is important to make sure that the user has control over when music is played. The simplest strategy for handling audio playback is simply to allow the end user to control audio with a play and pause button. Learn more about how to enable control over audio.
Movies created with Animate CC can be complex in terms of layout, structure, and navigation. As a result, it can be very difficult for screen reader users to make sense of such a movie. As sites become more complex, try to add a description for the entire movie to help orient screen reader users to the structure of the site. This can be accomplished using either the root-level description or a separate information screen. The advantage of building a separate information screen is that it allows the user to go to the content without hearing the description at each refresh.
Animate CC allows an infinite variety of controls. For all controls, it is important to provide the user with feedback on the control as it changes. In the simple example below, notice that once the button is pressed it changes from a play to a pause button. As the state of the button changes, the accessibility information for this button should be updated as well.
Animate CC allows designers to use a wide variety of color combinations. When making color choices for a movie, the designer should not rely on color alone to convey information. For example, it would not be appropriate to provide an instruction that reads, "Click the green button to go forward and the red button to go back." At the same time, it is important to make sure that there is sufficient contrast between foreground and background colors to make content easily readable.
Accessibility guidelines provide only limited guidance for the design of accessible content. Many of the most common issues in accessible design are not reflected in accessibility standards such as Section 508 or the W3C guidelines. Animate CC designers and developers should rely on a variety of methods for validation of content for accessibility. First, try accessing your content using screen access technologies such as Window-Eyes from GW Micro. This will provide the best insight into the usability of a movie for screen users. Also, be sure to test your site using only the keyboard without a screen reader running. Keyboard access differs when a screen reader is not present. Second, use third-party repair and validation tools for Animate CC. These tools can help to identify common errors in design. Third, be sure to test the site with actual users. It is very important that before a site is deemed accessible it is evaluated either formally or informally by people with disabilities.