making flash accessible
DESCRIPTION
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). Features of Flash. Sound Video Animation Graphics Interactivity. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/1.jpg)
Making Flash Accessible
May 22, 2008MIT Web Publishers User GroupHarvard University Flash User Group
Kal Gieber, Rich CaloggeroWGBH Interactive /Carl and Ruth Shapiro National Center for Accessible Media (NCAM)
![Page 2: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/2.jpg)
Features of FlashFeatures of Flash
Sound
Video
Animation
Graphics
Interactivity
![Page 3: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/3.jpg)
Accessibility ConsiderationsAccessibility Considerations
Keyboard navigation of content
Textual equivalents of visual content
Screen magnification of content
Color considerations
Captioning or other visual representation of audio content
![Page 4: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/4.jpg)
Flash’s Accessibility ToolsFlash’s Accessibility Tools
Accessibility panel
ActionScript 2 - Accessibility class and _accProp object
ActionScript 3 - Accessibility and AccessibilityProperties classes (FlashPlayer 9 only)
Various captioning components
![Page 5: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/5.jpg)
Accessibility Testing ToolsAccessibility 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.
![Page 6: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/6.jpg)
Content AccessibilityContent Accessibility
Easiest to adapt Textual content
Difficult to adapt Drag and drop interactivity
![Page 7: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/7.jpg)
Keyboard Navigation of ContentKeyboard 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.
![Page 8: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/8.jpg)
Keyboard Navigation IssuesKeyboard 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.
![Page 9: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/9.jpg)
Screen Reader AccessScreen 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.
![Page 10: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/10.jpg)
Flash’s Accessibility PanelFlash’s Accessibility PanelMake 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 activatedName (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
![Page 11: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/11.jpg)
Main Movie Accessibility PanelMain 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.
![Page 12: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/12.jpg)
ActionScript Accessibility ActionScript Accessibility PropertiesProperties
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.
![Page 13: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/13.jpg)
ActionScript 2 Accessibility ObjectActionScript 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.
![Page 14: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/14.jpg)
ActionScript 3 Accessibility ClassActionScript 3 Accessibility ClassAccessibility 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();
![Page 15: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/15.jpg)
ActionScript 3 AccessibilityProperties ActionScript 3 AccessibilityProperties ClassClassAccessibility 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
![Page 16: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/16.jpg)
AS3 AccessibilityProperties Class AS3 AccessibilityProperties Class PropertiesProperties// 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();
}
![Page 17: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/17.jpg)
Screen Reader AccessibilityScreen 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.
![Page 18: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/18.jpg)
Screen Reader Accessibility (cont.)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 .name property, which can be changed dynamically using ActionScript.
Provide audio indicatorsthat the content on thescreen has changed.
![Page 19: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/19.jpg)
Screen Reader Accessibility (cont.)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.
![Page 20: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/20.jpg)
Screen Reader DetectionScreen 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.
![Page 21: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/21.jpg)
Screen Reader IssuesScreen 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.
![Page 22: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/22.jpg)
Flash’s User Interface ComponentsFlash’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.
![Page 23: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/23.jpg)
Other ConsiderationsOther 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.
![Page 24: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/24.jpg)
Tools for Caption Playback in FlashTools 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
![Page 25: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/25.jpg)
W3C Timed Text DFXPW3C 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>
![Page 26: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/26.jpg)
NCAM’s ccPlayerNCAM’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
![Page 27: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/27.jpg)
NCAM’s ccMP3PlayerNCAM’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
![Page 28: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/28.jpg)
NCAM’s CCforFlashNCAM’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.)
![Page 29: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/29.jpg)
NCAM’s CCforFlash (cont.)NCAM’s CCforFlash (cont.) Caption formats
DFXP
QTtext
Caption sources External files
Internal text object
Embedded caption cuepoints
Additional features Displays captions in pop-on
or roll-up modes
Can switch between multiple languages found in DFXP captions
Provides caption search results
![Page 30: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/30.jpg)
Flash FLVPlaybackCaptioning Flash FLVPlaybackCaptioning ComponentComponent 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.
![Page 31: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/31.jpg)
Keys to SuccessKeys 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!
![Page 32: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/32.jpg)
Questions?Questions?
![Page 33: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/33.jpg)
Accessible Flash ProjectsAccessible 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/
![Page 34: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/34.jpg)
ResourcesResources Adobe Accessibility Blog
http://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
![Page 35: Making Flash Accessible](https://reader035.vdocument.in/reader035/viewer/2022062423/56814969550346895db6bce9/html5/thumbnails/35.jpg)
ResourcesResources CCforFlash
http://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/