Accessibility for Rich Internet Applications

Report by Chris Meier

February 2007

Andrew Kirkpatrick, Corporate Accessibility Engineering Lead at Adobe Systems Incorporated, spoke about "Accessibility for Rich Internet Applications" at the Boston-IA meeting on February 21, 2007.

Topic: "Accessibility for Rich Internet Applications"

Date: February 21, 2007

Speaker: Andrew Kirkpatrick

Location: Adobe Systems Incorporated
Newton, Massachusetts

Andrew Kirkpatrick, Lead Accessibility Engineer at Adobe Systems.

The first Boston-IA meeting of 2007 was hosted on February 21 by Adobe Systems Incorporated. Our speaker, Andrew Kirkpatrick, Corporate Accessibility Engineering Lead at Adobe Systems, talked about how to make rich internet applications accessible for people with disabilities.

Over the last few years web content has increased in complexity, interactivity, and dependance on scripted environments. The effect this has on users with disabilities is significant, and additional knowledge is required by web developers to ensure that applications are available for all users.

Adobe® Flash® and Adobe® Flex™ offer developers the ability to create accessible Rich Internet Applications, but many developers are unaware of the capabilities or how to take advantage of them. Andrew's talk focused on what is possible with Flash-based applications on the web, and best practices for development, as well as examining similarities and differences between Flash and Ajax accessibility.

Read the rest of the article.

Presentation Details

Andrew opened his presentation by defining Rich Internet Applications and providing examples on popular sites.

Rich Internet Applications function more like desktop applications than web applications, and include Adobe Flash, Adobe Flex, XHTML/CSS/JavaScript (typically used with Ajax), and Java.

Examples of Rich Internet Applications include the following:

Fly-out menus on Amazon.

Amazon uses fly-out menus that appear when the mouse hovers over a user interface element such as a tab. An example is the menu that pops up when the mouse rests over the "See all 40 product categories" tab on the home page.

The keyboard user can access this menu by navigating to the tab and then using the Enter key, which provides the menu items on another page.
Calendar on Expedia.

The calendar used for date selection on Expedia is a user interface enhancement for mouse users, but it is inaccessible for keyboard users.
List of search options on Google Suggest.

Google Suggest provides a list of suggested search items while the user is entering items in the search box. The arrow keys can be used for keyboard navigation, which afford some accessibility. However, the PageDown, PageUp, Home and End keys are disabled.

The remainder of Andrew's presentation focused primarily on Flash and Flex from Adobe Systems.

Flash is an interactive multimedia authoring tool. On the other hand, Flex provides a framework for application programmers to develop Rich Internet Applications using the MXML programming language, a form of XML.

The following list indicates some of the ways that Flex is akin to Flash:

Flex programmers can incorporate Flash's programming language, called ActionScript.
Flex applications use the .swf file extension.
A user must have the Flash Player plug-in downloaded to his or her computer to run a Flex application (refer to the Adobe Flash Player Download Center).

Examples of Flex applications include the following:

Flex Store

The information on this site is updated on the screen dynamically without the need to access other pages. To make this page accessible, access to the core components is essential. An accessibility challenge involves providing information concerning what is occurring on the screen during dynamic updating.
Flex PhotoViewer

Although effort has been expended to make this site keyboard accessible, the site is not screen reader accessible.
Flex Blog Viewer

[Editor's Note: This application is no longer available. Find other Flex examples on the Samples tab at the Adobe Flex Developer Center.]

The site is accessible with respect to working with the JAWS screen reader and tabbing, but it requires more work. For example, the box containing the list of results should have a title.

It is essential to test applications using Assistive Technologies like JAWS throughout the development process at scheduled intervals, and to involve people with disabilities in the testing. Also ensure that keyboard shortcuts that are provided for user access to the application are tested.

Both Flex and Flash come with out-of-the-box accessible controls called components (for example, radio button, check box, and text input box). Flash comes with 12 components, whereas Flex 2 offers 26 components.

Although Flex components support accessibility, it is important to note the following:

Accessibility must be programmatically enabled for the accessibility features to work (refer to Accessibility Best Practices for Flex).
The JAWS screen reader has scripts available that provide additional functionality when working with Flex components. For developers, it is important to provide a link to these scripts in the application for users to access (refer to JAWS scripts for Flex).
One of the components that is provided with Flex is the Accordion component, which can actually facilitate accessibility by associating child items with their parents (refer to Accessible Flex Components).

Key concepts for Flex and Flash controls include the following:

Label: Describes the function of the control. A label is assigned automatically— however, the label can be overridden by using the Accessibility Panel or the .name property in ActionScript.
Role: Depicts what the control is, such as a check box, a radio button. For non-standard controls, ensure that the information is provided with descriptive information.
State: Conveys the control's condition, such as checked, unchecked, or disabled. The out-of-the-box accessible components in Flash and Flex include Microsoft Active Accessibility (MSAA), which involves automatically supplying information to Assistive Technologies on Role and State.
Structure: Provides the context for the control relative to other information on the screen. For example, make certain that items that are grouped are read together. The tabIndex property can be used to control the reading order.

The Inspect32 tool can be used to test Flash and Flex controls to ensure that the Name, Role, State, and other properties are programmatically exposed to Assistive Technologies. For example, Inspect32 for a check box would depict if a name is exposed (the Name property), if a check box is indicated (the Role property), and whether or not the box is checked (the State property). The Inspect32 tool is one of the Active Accessibility 2.0 SDK Tools that are available from Microsoft.

Prior to formally concluding his presentation and fielding questions, Andrew mentioned that irrelevant information in Flash can be programmed so that it is not exposed to screen readers. In addition, Flash/Flex can be programmed to depict whether or not a screen reader is being used and, if so, provide an accessible alternative to inaccessible information. Finally, relative to Flash, Flex facilitates an easier transition from HTML and is inherently more accessible.

Adobe, the Adobe logo, Flash, and Flex are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.