Making Flash Accessible

1. Making Flash Accessible May 22, 2008 MIT Web Publishers User Group Harvard University Flash User Group Kal Gieber, Rich Caloggero WGBH Interactive / Carl and Ruth Shapiro National Center for Accessible Media (NCAM)

2. Features of Flash • Sound • Video • Animation • Graphics • Interactivity

3. Accessibility Considerations • Keyboard navigation of content • Textual equivalents of visual content • Screen magnification of content • Color considerations • Captioning or other visual representation of audio content

4. Flash’s Accessibility Tools • Accessibility panel • ActionScript 2 - Accessibility class and _accProp object • ActionScript 3 - Accessibility and AccessibilityProperties classes (FlashPlayer 9 only) • Various captioning components

5. Accessibility Testing Tools • Demo versions of JAWS and WindowEyes screen readers • Works with IE on the PC* • Demo version of ZoomText screen magnifier • Unplug the mouse • Turn off the speakers • Actual users • Other testing tools • inspect32.exe (MSAA inspector tool) • IBM Accessibility Tools Framework (open source, in development) * Currently, Flash’s accessibility settings will not work with VoiceOver on the Mac.

6. Content Accessibility • Easiest to adapt • Textual content • Difficult to adapt • Drag and drop interactivity

7. Keyboard Navigation of Content • Set a logical tab order for all content that is tab-enabled. • Use keyboard shortcuts to help users interact with complex content. • Flash’s yellow focusrectangle indicates theobject with the current focus. It should not bedisabled unless roll-over effects are very clear and noticeable. • Allow the user controlof timed activities.

8. Keyboard Navigation Issues • URLs embedded within Flash’s text fields cannot be accessed via the keyboard. • At this time, keyboard users can only tab into a Flash movie from HTML while using IE on the PC. • Using Flash’s user interface components can interfere with complex tab orders. • If the author has not set a tab order, Flash will create its own. Depending on the number of objects on the stage, this order may not be logical.

9. Screen Reader Access • Screen-reader software extracts all of the text found in the Flash movie and presents it to the user. • Any visual graphics or animation will need to provide alternate text equivalents to the screen reader. • Set tab order becomes the reading order. • Dynamic and input text fields are included in the tab order. • The are two modes for accessing the content: • Virtual – all of the content on the screen is buffered and read through via the arrowor tab keys. • Edit (forms) – only interactive elements are read, including form elements. Content navigation is accomplished via the tab key.

10. Flash’s Accessibility Panel Make object accessible (movie clip, button, textfield)- checking this item turns on the accessibility of this object Make child objects accessible (movie clip, button)- checking this item allows the accessibility of any objects inside this object to be activated Name (movie clip, button)- provides a text equivalent or label for the object Description (movie clip, button, textfield)- provides a longer description of the object Shortcut (movie clip, button)- identifies the shortcut key combination that can be used to activate this interactive object Tab index (movie clip, button, textfield)- sets the position of the object in the tab and reading order

11. Main Movie Accessibility Panel • When no object is selected,the Accessibility Panel displays the settings for the main movie. • Auto label can be used to have Flash determine labelsfor buttons and form elementsbased on the text it findsaround those objects. • Name can be used to providealternate text in place of the Flash movie.

12. ActionScript Accessibility Properties • Each object will need to have an accessibility object created for it. • Most properties are identical to those found in the Accessibility panel. • The .silent and .forceSimple ActionScript properties are the exact opposite of the “Make object accessible” and “Make child objects accessible” properties in the Accessibility panel. • Accessibility.updateProperties() is used to provide dynamic content changes to the MSAA information used by the screen-reader technology. • Accessibility.isActive() is used to test whether assistive technology is in use. The value“true” is returned if any of the following are active: ZoomText screen magnifier, JAWS, WindowEyes.

13. ActionScript 2 Accessibility Object myObject._accProps=new Object(); // creates accessibility object myObject._accProps.silent=false; // object visible to AT* myObject._accProps.forceSimple=true; // to silence child objects myObject._accProps.name=“My Object”; // object’s alt text or label myObject._accProps.description=“Long desc go here.”; // optional myObject._accProps.shortcut=“Shift-c”; // identifies shortcuts** myObject.tabIndex=20; // position of object in the // tab or reading order Accessibility.updateProperties(); // updates the accessibility // properties in MSAA Accessibility.isActive(); // true – assistive technology // is being used. // false – no assistive tech. *AT – Assistive Technology, such as screen-reading technology. ** This is used by screen readers to label an object’s keyboard shortcut. It does not create the shortcut. A keyboard listener is needed to detect keystrokes and shortcuts.

14. ActionScript 3 Accessibility Class Accessibility package: flash.accessibility.* Accessibility class: flash.accessibility.Accessibility Indicates whether environment supports (true) or does not support (false) communication with accessibility aids. Capabilities.hasAccessibility Indicates whether a screen reader is currently active and the player is communicating with it. Accessibility.active Updates any changes made to the accessibility properties of active objects. Accessibility.updateProperties();

15. ActionScript 3 AccessibilityProperties Class Accessibility package: flash.accessibility.* AccessibilityProperties class: flash.accessibility.AccessibilityProperties The AccessibilityProperties object is created similar to a TextFormat object: accPr:AccessibilityProperties=new AccessibilityProperties(); The AccessibilityProperties object is applied to a display object’s accessibilityProperties property: myObject.accessibilityProperties=accPr; Tab index is separate from accessibility properties: myObject.tabIndex

16. AS3 AccessibilityProperties Class Properties // Create and apply property values to AccessibilityProperties object. accPr:AccessibilityProperties=new AccessibilityProperties(); accPr.silent=false; // object visible to AT* accPr.forceSimple=true; // to silence child objects accPr.name=“My Object”; // object’s alt text or label accPr.description=“Long desc go here.”; // optional accPr.shortcut=“Shift-c”; // identifies shortcuts** // Apply the accessibility properties object to the display object. myObject.accessibilityProperties=accPr; // If assistive technology is present, update the properties. if(Accessibility.active){ Accessibility.updateProperties(); }

17. Screen Reader Accessibility • Use the same tab order for the reading order. • Dynamic text is included in the tab order. • Initially set video and background audio off, so the audio does not interfere with the reading of the content. • Provide alternate text inthe name fields of each relevant object. • Objects that are used for decoration can be hidden by setting their.silent property to “false” or unchecking Make object accessible.

18. Screen Reader Accessibility (cont.) • When content is dynamically changing, use the Accessibility.updateProperties() method to refresh the content in the screen reader’s buffer. • Dynamically changing content should have its accessibility settings created and modified in ActionScript. • Interactive elements with multiple states, should have their states included in the .nameproperty, which can be changed dynamically using ActionScript. • Provide audio indicatorsthat the content on thescreen has changed.

19. Screen Reader Accessibility (cont.) • Graphic objects are read as “graphics” and do not have accessibility settings. To control their accessibility, place the graphics in a movie clip. • Static text fields do not have a tab index value. Their content is automatically read after all indexed content in an order determinedby Flash. If possible, all text should be placedin dynamic text fields.

20. Screen Reader Detection • In some cases, it will be necessary to present alternate forms of the content if a screen reader is being used. • In AS3, the Accessibility.updateProperties() can only be called if a screen reader (or other form of assistive technology) is present or an error will occur. • Use the Accessibility.active property to detect if assistive technology is present (true) or not (false). Note: In AS2, the property is Accessibility.isActive. • Detection should be ongoing for the following reasons: • It takes time for Flash to recognize and interact with the screen reader. The connection may not have finished initializing when Accessibility.active is first checked. • Assistive technology might be turned on in the middle of accessing the Flash content.

21. Screen Reader Issues • While navigating through the content in virtual mode, setting the focus to certain objects has no effect (with some exceptions in JAWS). • While the focus can be set in the edit (forms) mode, dynamic text fields are not read. • With WindowEyes, whenever the content has been updated using Accessibility.updateProperties(), the screen reader will start reading the content from the top of the reading order. • In some cases, the accessibility settings set in the Accessibility panel can interfere with dynamic changes made to those settings in ActionScript. • At this time, the VoiceOver screen reader included with Apple computers will not read the content of Flash movies.

22. Flash’s User Interface Components When Flash’s user interface components are used, their accessibility class must be imported and enabled.Check Box example: import fl.accessibility.CheckBoxAccImpl; CheckBoxAccImpl.enableAccessibility(); Note: The focus manager used to control the user interface components may interfere with the tab order of other objectsin a Flash movie. Most noticeably, it will inhibit tabbing between objects in movie clips. This effect will happen even if the component only exists in the library and not on the stage.

23. Other Considerations • Screen Magnification • Be careful of roll-over effects which change the content in areas of the screen which might not be visible when the screen is magnified. • Text size • Browser controls of text size have no affect on the text inside a Flash movie. Controls can be added inside the Flash movie to adjust the font size independent of the browser. • Color • Provide adequate color contrast. • Choose colors that are easier to discern. • Do not use color as the single means to identify important content. • Flickering • Avoid objects that flicker at a rate between 2-55 Hz which has been known to cause photosensitive epileptic seizures.

24. Tools for Caption Playback in Flash • ccPlayer • CCforFlash captioning component (AS2 projects) • FLVPlaybackCaptioning component (AS3 projects) • Types of caption formats: • DFXP – Distribution Format Exchange Profile, Timed Text Authoring Format(non-proprietary W3C candidate recommendation) • QTtext (Apple’s proprietary timed-text format) • Caption cuepoints that are embedded in the videousing software such as Captionate

25. W3C Timed Text DFXP <?xml version="1.0" encoding="UTF-8"?> <tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1" xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling"> <head> <styling> <style id="b1" tts:color="#ffffff"/> </styling> </head> <body> <div xml:lang="en" style="b1"> <p begin="00:01.7" end="00:05.0">Narrator: Someone watching a car<br/>accelerate toward light speed</p> <p begin="00:05.0" end="00:07.4">would see something<br/>very strange.</p> <p begin="00:07.4" end="00:10.5">It would seem as though the<br/>car itself were getting shorter</p> </div> </body> </tt>

26. NCAM’s ccPlayer • Pre-built Flash video player that displays captions found in external caption files or embedded as caption cuepoints in the video. • Controls are accessible to keyboardand screen-reader users. • Plays in FlashPlayer 8+. • Features include: • text search of captions • caption language change • fullscreen video display • Caption formats recognized: • DFXP • QTtext • Embedded caption cuepoints

27. NCAM’s ccMP3Player • Pre-built Flash mp3 player that displays captions found in external caption files. • Controls are accessible to keyboardand screen-reader users. • Plays in FlashPlayer 8+. • Caption formats recognized: • DFXP • QTtext

28. NCAM’s CCforFlash • Captioning component freely available through NCAM. • Synchronizes captions with the following objects: • Netstream video objects • Flash MX and Flash 8 video components (FLVPlayback and MediaPlayer) • Sound objects • Movie timelines • Currently AS2 version can be used in Flash MX, Flash 8 and Flash CS3 (ActionScript 2) projects. (AS3 version in development.)

29. NCAM’s CCforFlash (cont.) • Caption formats • DFXP • QTtext • Caption sources • External files • Internal text object • Embedded caption cuepoints • Additional features • Displays captions in pop-onor roll-up modes • Can switch between multiple languages found in DFXP captions • Provides caption search results

30. Flash FLVPlaybackCaptioning Component • Captioning component included with Flash CS3. • Synchronizes captions with videos played viathe FLVPlayback component. • Available only for ActionScript 3 projects played in FlashPlayer 9+. • Captions can be displayedautomatically within the FLVPlayback’s video regionor through a customizedtext field. • Captions can reside in an external DFXP file or embedded as caption cuepoints in the video.

31. Keys to Success • Include accessibility planning in the development of your project. • Provide the user with detailed instructions on how to navigate the content. • User testing!

32. Questions?

33. Accessible Flash Projects • ccPlayerhttp://ncam.wgbh.org/webaccess/ccforflash/ccplayermain.html • ccMP3Playerhttp://ncam.wgbh.org/webaccess/ccforflash/ccmp3playermain.html • Peep and the Big Wide World Player (captions) http://peepandthebigwideworld.com/videos/ • Don’t Wake Kate (self voicing children’s game)http://pbskids.org/arthur/games/dontwakekate/index.html • J.K. Rowling sitehttp://www.jkrowling.com/

34. Resources • Adobe Accessibility Bloghttp://blogs.adobe.com/accessibility/ • Adobe Flash CS3 Accessibilityhttp://www.adobe.com/accessibility/products/flash/ • Flash Accessibility Design Guidelines and Best Practiceshttp://www.adobe.com/accessibility/products/flash/best_practices.html • IBM Accessibility Tools Frameworkhttp://www.ibm.com/developerworks/blogs/page/schwer?entry=ibm_contributes_new_accessibility_tools • JAWS, Freedom Scientifichttp://www.freedomscientific.com/ • WindowEyeshttp://www.gwmicro.com/ • ZoomTexthttp://www.aisquared.com/index.cfm

35. Resources • CCforFlashhttp://ncam.wgbh.org/webaccess/ccforflash/ • ccPlayerhttp://ncam.wgbh.org/webaccess/ccforflash/ccplayermain.html • ccMP3Playerhttp://ncam.wgbh.org/webaccess/ccforflash/ccmp3playermain.html • Carl and Ruth Shapiro National Center for Accessible Media at WGBHhttp://ncam.wgbh.org/ • The Media Access Group at WGBHhttp://main.wgbh.org/wgbh/access/access.html • W3C Timed-Text DFXPhttp://www.w3.org/TR/2006/CR-ttaf1-dfxp-20061116/