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)

Features of FlashFeatures of Flash

Sound

Video

Animation

Graphics

Interactivity

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

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

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.

Content AccessibilityContent Accessibility

Easiest to adapt Textual content

Difficult to adapt Drag and drop interactivity

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.

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.

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.

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

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.

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.

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.

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();

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

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();

}

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.

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.

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.

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.

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.

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.

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.

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

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>

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

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

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.)

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

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.

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!

Questions?Questions?

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/

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

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/