Adobe® Corporate Template 2005

2005 Adobe Systems Incorporated. All Rights Reserved.1

Accessibility for Rich Internet Applications

Andrew Kirkpatrick

Corporate Accessibility Engineering Lead

Adobe Systems


What Are Rich Internet Applications?

Web applications that have functionality comparable to that of traditional desktop applications

Common technologies Flash / Flex

XHTML/CSS/JS (often with AJAX)

Java


What Are Rich Internet Applications?

Examples Amazon: http://amazon.com/

Expedia: http://www.expedia.com/

Simple: http://www.google.com/webhp?complete=1&hl=en

Flex Store: http://www.adobe.com/go/flex_flexstore_app

Flex Photo Viewer: http://www.adobe.com/go/flex_photoviewer_app

Flex Blog Reader: http://flexapps.macromedia.com/flex15/blogreader/blogreader.mxml


What is Flex?

Adobe® Flex™ 2 software is a rich Internet application framework based on Adobe Flash® that will enable you to productively create beautiful, scalable applications that can reach virtually anyone on any platform.

http://www.adobe.com/products/flex/

Flex applications display in the Flash player

Flex applications are delivered as .swf files

52005 Adobe Systems Incorporated. All Rights Reserved.

Flex: FlexStore


Flex: PhotoViewer


Flex: Blog Reader


What Accessibility Issues Exist?

Additional controls not previously available in web pages New controls such as “tab navigator” and “date chooser” have no HTML analog

Dynamically updating content users may not be aware that content has changed, or where the new content is

in the application

These issues are not new, but are more commonly seen today

…also “Standard” accessibility issues Image equivalents

Color / Contrast

Form labeling

Etc.


Users to Support

Users who can only use the keyboard

Users who are Blind or Visually Impaired (screen reader and screen magnifier users)

Users requiring improved contrast

Users who are deaf or hard of hearing

Users with cognitive impairments

Users speaking different languages

Support for different users requires varying levels of attention from the developer.


Accessible Flash

Best practices for creating accessible Flash and Flex applications


JAWS for Windows

http://www.freedomscientific.com/fs_products/software_jaws.asp JAWS 4.5, 6.1, 6.2, 7.x, 8.x provide solid support for

Flash and Flex content Flex 2.0 was developed with JAWS 6.1 as the test version

Flash Components Scripts http://www.adobe.com/macromedia/accessibility/

features/flex/jaws.html These scripts handle issues related to Flash components

used in Adobe Flex applications

Other Assistive Technologies Window-Eyes, IBM HomePage Reader, HAL/SuperNova,

ZoomText, PC-Talker (Japanese), and JAWS-J also interoperate with Flash and Flex content.

Screen Reader Requirements


Testing Flash and Flex for Accessibility

Designers are visual in their way of looking at the world

Devote time to learning keyboard shortcuts, then use them

Devote time to learning the screen reader, then use it

Test for accessibility are regular intervals Test for screen reader access at least twice times a day

Test other use cases at least once a week (more often on compressed schedules)

Involve people with disabilities in the process User testing for large scale projects

Email based feedback for smaller projects


Key Concepts

Label What is this thing?

Role What does this thing do?

State Is this thing on or off?

Structure How does this thing relate to

the rest of the things on the screen?

Flex simplifies all of these


Key Concepts: Label

Every control should have an associated label

Label should describe function

If function changes, so should label


Key Concepts: Label

Assigning labels Auto-labeling is enabled by

default

Enabled for an entire movie

Assumes text contained within an object serves as the label

Will only use one text object

For components, text above or to the left will be read as the label

Assigning a .name value overides auto-label feature


Key Concepts: Label

Assigning labels Labels can be assigned using

the .name property.

There are two ways of assigning the .name property.

First, you can use the Accessibility panel.

Keep values descriptive of function, not the control itself


Key Concepts: Label

Assigning labels Labels can be assigned using ActionScript

Three step process

Create accessibility object for each instance (once)

Assign properties

Update accessibility object (once per event)

_root.city4_mc._accprops = new Object();_root.city4_mc._accprops.name = “Home";Accessibility.updateProperties();


Key Concepts: Label

Provide text equivalents for images and graphics in Flex Provide text equivalents that reflect the function of the image,

not one that merely describes the image. Use Flex’s tooltip property to provide text alternatives for

images and buttons with icons.

<mx:Image id="img1" visible="true" source="author.jpg" toolTip="Tool Tip for Image"/> <mx:Image id="img1" visible="true" source="author.jpg" toolTip="Tool Tip for Image"/>


Key Concepts: Role

Screen reader user should know what every control does Buttons correctly identified

Controls emulating standard windows controls should be identified

Unusual controls should provide cues to users as to their identification, operation and state information


Key Concepts: State

Every control should indicate:

Current focus and selection

Number of possible selections

Update when selection changes

Update info as state changes

Use Accessible Flash components for complex controls.

Accessible Flash or Flex components include MSAA support to dynamically deliver this content.


Role and State in Flash Controls

Flash 8 components and Flex components provide support for role and state information automatically.

W3C group working on this issue for DHTML

http://www.w3.org/TR/aria-roadmap/

IBM recently released IAccessible2 with support for this roadmap


Flash Controls

12 Accessible Flash components

Button Check Box Radio Button Label

Combo Box

List Box

Window

Alert

Data Grid

Text

TextArea

TextInput


26 Accessible Flex 2 Components

Accordion

Alert

Button

CheckBox

ComboBox

DataGrid

DateChooser

DateField

Form

Image

Label

LinkButton

List

Flex Controls

Menu

MenuBar

Panel

RadioButton

RadioButtonGroup

TabNavigator

Text

TextArea

TextInput

TitleWindow

ToolTipManager

Tree

Validator


Accessible JavaScript Components

IBM is checking accessibility fixes into the Dojo (http://www.dojotoolkit.org) library

Yahoo! has also focused attention on accessibility in its YUI library.

There are many JavaScript libraries

Adobe provides the Spry framework (http://labs.adobe.com/technologies/spry/)

Accessibility requires a large investment, so not all frameworks will provide full accessibility – WAI-ARIA work will reduce the investment some.


Accessible JavaScript Components

Today, the “accessible” experience for AJAX applications is often defined as the “no JavaScript” experience

Unfortunately, most screen readers read js-created content

Full keyboard access depends on scripting today - JavaScript can add accessibility for many users.


Key Concepts: Structure

Related controls should be read as a group

Make sure buttons from navigation are not mixed in with text

Ensure buttons in different columns or rows are read together

Ensure that elements that are obscured or off-stage are not read.



There are two methods for controlling the reading order of content

Control using position

Control using tabIndex



Control using position

Positive Example:

WGBH – Zoot Suit Riots www.pbs.org/wgbh/amex/zoot/eng_sfeature/mx/pop_zoot_mx.html

A simple example the controls the reading order using position on screen

Notice that the order of the navigation is a bit mixed up

Navigation is separated from content by screens to prevent confusing structure

Use .silent to hide elements when necessary



Control using tabIndex

If necessary, control reading order using the tabIndex property

In Player 8 and newer, any object omitted from the tab order will be last in the reading order

In Player 7 and older, omitting an object results in the default tab order defined by the player being used to create the MSAA order.

The tab order without a screen reader will honor an incomplete tabIndex listing

Code sample<mx:CheckBox label="First" tabIndex="2"/> <mx:CheckBox label="Second" tabIndex="1"/> <mx:TextInput tabIndex="3"/> <mx:Button label="Third" tabIndex="4"/>

<mx:CheckBox label="First" tabIndex="2"/> <mx:CheckBox label="Second" tabIndex="1"/> <mx:TextInput tabIndex="3"/> <mx:Button label="Third" tabIndex="4"/>


Key Concepts: Recap

Label What is this thing?

Role What does this thing do?

State Is this thing on or off?

Structure How does this thing relate to

the rest of the things on the screen?


Resources

Adobe Links

Adobe Accessibility Resource Centeradobe.com/accessibility

Flash Accessibility Best Practicesadobe.com/resources/accessibility/best_practices/bp_fp.html

DHTML Links

http://developer.mozilla.org/en/docs/Key-navigable_custom_DHTML_widgets

http://www.mozilla.org/access/dhtml/class/tabpanel

http://www.mozilla.org/access/dhtml/class/tree


Documents

Adobe® Corporate Template 2005