Animation
While working in Adobe Flash CS3 Professional, designers and developers need to be mindful of the ways in which assistive technologies such as screen readers will interact with their movies. This brief section covers information on how to optimize accessibility when creating animation.
Understanding How Assistive Technologies Handle Animation
When a screen reader encounters a piece of Adobe Flash content, the screen reader 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 Adobe Flash content and the rest of the page.
A unique feature of Adobe Flash content is that it may change over time. As the content changes, Adobe Flash Player 9 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 Adobe Flash 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 Adobe 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 Adobe Flash notifications on the page. Pressing the keystroke again allows the user to resume Adobe Flash notifications.
Providing Text Equivalents for Entire Movies
A better solution for the handling of animation is simply to hide the animation from assistive technologies. Adobe Flash 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 Adobe Flash 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 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.
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 importantly, 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.
Avoid Constant Motion
An important consideration for accessible animation relates to constant motion on the screen. While it is quite 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.
Looping: No animation should last for more than 20 seconds in total. In addition, repeated content shouldn't’t loop more than three times. This can be achieved by:
- Controlling the number of frames in an animation.
- Where several frames are required, loop only twice.
Blinking: The speed and colour of content can make the animation appear to blink, in extreme cases, a strobing effect, dangerous to people with photosensitive epilepsy, might be caused. To avoid this:
- Content should not blink for more than three seconds
- Content must not contain anything that flashes more than three times in any one-second period
Back to the Top
Accessible elements of a Flash movie
By default, Flash CS3 Professional can make text, input text fields, buttons, movie clips, and even entire movies accessible. You can use the Accessibility panel in Flash CS3 to add a text equivalent or even to hide elements from assistive technologies.
In the example below, the Flash movie shows text and a animated banner. In this case, it is appropriate to provide a text equivalent for the animated banner only, since the text area is automatically read by the screen reader.
Try it out!
In this example, you will learn to make an animated banner an accessible animation. To begin, you will need to create an animation that starts small and gets larger over 15 frames. Also, it is recommended to create two separate layers:
- One layer that contains the animation.
- Another layer that contains the text 'Welcome.'
- Download files: banner.jpg, Final_Animation_AF.zip
To import the file:
- Select the File menu, then Import.
- Browse to the banner.jpg file.
- Select 'Open'.
To setup up layers:
- Rename the current layer to 'Animation' by double-clicking on 'Layer 1.'
- Insert a new layer by going to the Insert menu, then selecting Layer.
- Rename this new layer 'Text.'
- With the text layer still selected, add the text 'Welcome.'
To setup the keyframes:
- Select the animation layer.
- Right-click on the banner image, and select 'Convert to Symbol.'
- Make this a Movie Image, and name it 'banner_Image.'
- Now, insert a keyframe in the text layer at frame 15 by right-clicking on frame 15 in the text layer, and selecting 'Insert Keyframe.'
- Repeat step 4 for the Animation layer. Your timeline should look similar to the image below.
Timeline for the Flash Animation
To setup the animation:
- Select frame 1 in the Animation layer.
- Make sure the banner image is selected.
- Choose the free transform tool from the toolbar.
- Hold down the Shift key, then drag the bottom-handle towards the middle of the image; this makes the image smaller than it was.
- Select frame 5 of the animation layer, then right-click to bring up the menu and select 'Insert Keyframe'
- Then hold down the Shift key, then drag the botton-handle down a little so the image increases; this makes the image larger than the 1st frame image.
- Repeat this a few more times down the timeline so that the image get's larger each time.
- Then go back to frame 1 of the animation layer, then right-click to bring up the menu and select 'Create Motion Tween.'
- Repeat this for the rest of the keyframes on the animation layer, except the last keyframe which should be the final image size (maximum sized image).
- Select various frames of the animation layer, and you should see that an animation of a banner getting bigger over time now has been created.
Making the Animation Accessible
To make this animation accessible:
- Convert the animation to a symbol.
- Use the Accessibility Panel to provide text equivalence to the animation.
To convert the animation to a symbol:
- Select the entire Animation layer. All the frames should turn black.
- Right-click on any of the frames to bring up the sub-menu. Select 'Cut Frames.'
- From the 'Insert' menu, select 'Insert New Symbol.'
- Name the clip 'banner Animation' and make sure it is a movie clip. Then press the 'OK' button.
- You will now be in symbol editing mode. Select frame 1 of Layer 1 to select it, then right-click to bring up the sub-menu. Select 'Paste Frames.' You should now see all the frames of your original animation, as well as the renaming of the layer.
You are now ready to make the animation, but it is extremely important to remember to keep the animation from looping. A looping animation causes the screen reader to start at the beginning each time the animation loops.
To stop the loop:
- Select frame 15, then right-click to bring up the sub-menu, and select 'Actions.' The Actions Panel should now pop up on the screen.
- In the Actions Panel, type 'stop();' to stop the movie clip looping
- This will add a small 'a' in frame 15. Your project should look like the image below.
- Exit symbol edit mode by selecting 'Scene 1,' which is located right above the stage.
To add the animation back to the stage:
- Go to the Library by pressing F11.
- You should now see a symbol in the Library named 'banner Animation.'
- Make sure the Animation layer is selected, then drag-and-drop the animation to its original position.
To Add the Text Equivalent:
- With the banner animation selected, you can now access the control panel for this item in the Properties Panel. Look on the right side for a little icon of a man and select it, or you may hit Shift + F11 for accessibility panel. (See image below for accessibility icon).
- In the name field, type 'Farm Store Banner Animation.' and in the description field type 'This animation depicts a rising banner for the farm store at Kellogg Ranch.'
Note: Do not forget the periods at the end of the sentences. No periods cause the screen reader to run sentences together. - Normally, you will want to cover up any child objects from the screen reader, so deselect the 'Make Child Objects Accessible' checkbox. Your animation now has a text equivalent (see image below).
- Publish, save, and upload so you can test in a screen reader using Internet Explorer 5 or higher.
Accessibility Panel
There are several options available on the Accessibility panel. The items that are visible on the Accessibility panel vary based on the type of object that is currently selected.
Make Movie Accessible: If selected (the default), then accessibility features of Flash will be exposed to the screen reader. If not selected, the screen reader will identify that a Flash movie is there, but will not access any of the content within the movie.
Make Object Accessible: If this option is deselected, the currently selected object will be made invisible to the screen reader and the textual equivalent and any text immediately within the current symbol will not be accessible to the screen reader. This can be useful if the symbol does not convey important content. By default, objects are accessible, so be sure to select this option if the object contains important text or convey content.
Make Child Objects Accessible: If you have other objects or symbols embedded within a selected symbol, you can make them hidden by selecting this option. This is useful for symbols that are comprised of multiple objects, but as a whole only need one text equivalent. For instance, if a movie clip symbol contains a text animation wherein each character of a word is animating independently, you wouldn't want each character to be read individually by the screen reader. To solve this, you would add alternative text to the movie clip itself and deselect the Make Child Objects Accessible to hide the animating items within the movie clip.
Auto label: This option tells Flash to associate buttons with text that are within or near the button. If all of your buttons have text within them or adjacent to them, then Auto label can automatically associate them and will read the text as the alternative text for the button. The results are not always as expected and care should be taken when using Auto label.
Name: This is where you would enter alternative text for a Flash object. This is what the screen reader will read in place of the selected element. You can enter a brief (one or two short sentences) name or description of the object.
Description: This is used for longer descriptions of Flash objects and is not required unless additional description is needed beyond that allowed within Name. If both Name and Description are provided, the screen reader will read the Name first, then the Description. Functionally, there is no difference between Name and Description.
Shortcut: This allows you to indicate to the user what the shortcut key is for that specific object. It does not program the keyboard shortcut, but simply alerts the user as to what the shortcut key is.