My First ACCESSIBLE Flash Movie

1. My First ACCESSIBLE Flash Movie

2. Course notes Detailed course notes, a printable copy of my slides, and all the samples shown today can be downloaded from www.McClurgStudios.com/flashforward.

3. Getting to know your speaker

4. Accessibility is all about creating a level playing field where anyone can access and understand the information in your Flash movie, regardless of disability. What is accessibility?

5. Caption all audio content that provides information (spoken and unspoken). Avoid playing background sounds as words are being spoken. If background audio is essential, make it 20 decibels (4x quieter) than the foreground audio. Common DisabilitiesHearing Impairments

6. Audio content can make it difficult to hear a screen reader. If you have audio content, it's best to: Detect if a screen reader is present If so, don't automatically play the audio Instead, give the customer a button to play the audio Common DisabilitiesHearing Impairments

7. Common DisabilitiesMotor impairments • Use a logical tab order for the buttons in your ad. • Don't make users chase a button across the screen.

8. Common DisabilitiesCognitive impairments • Give customers time to read any text you put on screen. • Play the movie more than once. • If you can't play the movie more than once, give the customer a replay button. • Use the simplest language possible in all of your text.

9. Common DisabilitiesPhoto-sensitivity • Do not cause any part of the ad to flash (change rapidly from light to dark) more than twice per second. • For a more detailed description of what the W3C thinks “flashing” is, see “general flash threshold” here: www.w3.org/TR/WCAG20/appendixA.html

10. Common DisabilitiesLow vision • Use large text • Avoid thin or light fonts • Don't convey information solely through color. • Make sure the color and brightness of your text contrasts sharply with its background. To download tools for testing contrast, visit: www.visionaustralia.org.au/info.aspx?page=614

11. Screen Readers

12. Screen Readers • Screen Readers are programs that use a speech synthesizer or Braille device to share text content with the user. • Flash-Enabled Screen Readers: • JAWS: www.freedomscientific.com • Window-Eyes: www.gwmicro.com • Home Page Reader: • www-306.ibm.com/able/solution_offerings/hpr.html

13. Designing for Screen Readers • Screen readers only work with Flash if the customer uses Internet Explorer for Windows. • Screen readers can only read text • Give “names” (descriptions) to any visual content that provides significant meaning. • Do not change text over time except when a user clicks a button to initiate the change.

14. Designing for Screen Readers • Hide animated text from the screen reader and make another copy available to the screen reader. • Interactive elements that change over time are a problem for screen readers. • Screen readers can't see objects offstage. • Screen readers can't see color. Black text on a black background may be invisible to the sighted, it's clear as day to a screen reader.

15. Designing for Screen Readers • WMODE – an attribute used to give Flash movies a transparent background when viewed in a browser. Using this attribute will make the entire movie completelyinvisible to a screen reader. • “Click to Activate” is more than a nuisance to a screen reader.

16. Taking Charge:The Accessibility Panel

17. The Accessibility PanelEditing the Movie • Leave everything checked. • Do not give names or descriptions to your movie. They are not well supported.

18. The Accessibility PanelMovie Clip Symbols • Make object accessible – uncheck to hide the movie clip from screen readers • Name – use to add descriptions of visual content, text alternatives for animated text, etc. Use \r and\” instead of line breaks and double quotes. • Other fields - ignore

19. The Accessibility PanelButton Symbols • Make object accessible – uncheck to hide the button from screen readers • Name – use to “label” your buttons. This is more predictable than relying on text on the button's timeline. • Other fields - ignore

20. The Accessibility PanelButton Symbols • Don't Do This: • Unless a button has an Up, Over and Down state, • screen readers will not read the name property eliably.

21. The Accessibility PanelGraphic Symbols

22. Let's Make a Movie

23. Here's What We're Going to Build

24. A bucket for text • Open a new Flash movie 200 x 300 • Create a rectangle (1 pixel high, 200 wide) and convert it to a movie clip symbol. This will contain the text alternatives for the movie. • Give the movie clip an instance name. • Align the symbol to the top, left of the stage • Select the movie clip, then enter your text alternatives into the name field of the Accessibility panel.

25. Make the ad clickable • Create a rectangle (299 pixels x 200 wide) and convert it to a button symbol. • Give the button an instance name and add ActionScript to make the button work. • Align the button to the top, left of the stage, then nudge it down 1 pixel. • While the button is selected, enter give it a description in the name field of the Accessibility panel. Something like, “Learn more.”

26. A new stage for animation • Create a small rectangle. Align it to the top, left of the stage. Convert it to a movie clip symbol. • Give the new clip an instance name. • Select the clip and uncheck “Make object accessible” in the Accessibility panel. • Double-click the new symbol to edit it in place. Delete the rectangle. You now have a new stage to use for your animation.

27. Go to town!

28. What our stage can hold • Our new stage can contain text, graphic symbols, movie clips, bitmaps, even video. • It just can't contain: • Audio • Buttons • Text input fields • Or other interactive elements • So, start animating!

29. Working in the real world • Our movie is accessible. • All our visual content is in a movie clip symbol, hidden from screen readers. • But movie clip symbols don't stream. Doh!

30. Splitting the stage • Return to the main stage. • Copy the frame that contains our new stage. • Add a layer and paste the frame onto it. • Select each copy of the movie clip on the stage and duplicate the clip. You should now have 3 copies of the symbol in your library – the original, plus the two on the stage.

31. Splitting the stage • Edit the top copy of the symbol. Delete the all layers except those that contain text. • Edit the second copy of the symbol. Delete all the text layers. • Return to the main stage. Select the symbol with the non-text elements and convert it to a graphic symbol using the Properties panel. Set it to play once and stop. Add enough empty frames to the main timeline that the animation will play once.

32. Adding a preload • Add an empty frame to the end of the movie for all layers. • Move the keyframes for the animated movie clip and graphic symbols from frame 1 to frame 2. • Add your preload code to the actions layers on frame 1.

33. Multiple Buttons

34. Multiple Buttons • Button Row – if the hit areas of your buttons are all the same height and are vertically aligned, they should always read left to right by default. If one sticks out above the others, it will be read first.

35. Multiple Buttons • Button Column – if the hit areas of your buttons are all left aligned, they should always read top to bottom. • Scripting tab order – Another good reason to give all symbols instance names. Controlling tab order through ActionScript is as easy as: • [instancename].tabIndex = [number] • main_btn.tabIndex = 1; • secondary_btn.tabIndex = 2;

36. Adding Sound

37. Caption all audio content that provides information (spoken and unspoken). Avoid playing background sounds as words are being spoken. If background audio is essential, make it 20 decibels (4x quieter) than the foreground audio. Remember from before...

38. Audio content can make it difficult to hear a screen reader. If you have audio content, it's best to: Detect if a screen reader is present If so, don't automatically play the audio Instead, give the customer a button to play the audio Remember from before...

39. Create a sound object • On the first frame, add this code to the actions layer: • var soundtrack_sound:Sound = new Sound(); • var soundPlaying:Boolean = false;

40. Test for screen readers • On the frame you wish the audio to start on, place this code: • if (!(Accessibility.isActive())) • { • soundtrack_sound.loadSound("felicetti1.mp3", true); • soundPlaying = true; • } • The movie must be active for at least 2 seconds before this code is executed or it will return "false" even if a screen reader is present.

41. A secret button... • Select the main button and make it 1 pixel shorter. • Copy the main button and paste it onto a new layer. • Give it a new instance name. • Resize it to 1 pixel high. • Align it to the bottom of the stage. • Select the button and enter “play soundtrack” into the name field of the Accessibility panel.

42. A secret button... • Now, add this code to the actions layer on the first frame: • sound_btn.onRelease = function() • { • if (soundPlaying) • { • soundPlaying = false; • soundtrack_sound.stop(); • } • else • { • soundPlaying = true; • soundtrack_sound.loadSound("felicetti1.mp3", true); • } • }

43. Questions