Home > Newsletter > Article 22 > Andrew Kirkpatrick Presentation (text version)

< More Articles

Accessibility for Rich Internet Applications

Presenter: Andrew Kirkpatrick

The text alternative to a PowerPoint presentation delivered by Andrew Kirkpatrick, Corporate Accessibility Engineering Lead at Adobe Systems Incorporated, at the February 21, 2007, meeting of Boston-IA.

Quick Links:

Slide 1:
Accessibility for Rich Internet Applications

Andrew Kirkpatrick,
Corporate Accessibility Engineering Lead,
Adobe Systems

Slide 2:
What Are Rich Internet Applications? (1)

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

  • Common technologies:

    • Adobe® Flash® / Adobe® Flex™
    • XHTML/CSS/JS (often with AJAX)
    • Java

Slide 3:
What Are Rich Internet Applications? (2)

Examples

[Examples require the Adobe Flash Plug-in.]

Slide 4:
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.

  • Flex applications display in the Flash player.
  • Flex applications are delivered as .swf files.

Slide 5:
Flex: FlexStore

[Example of a shopping application developed in Flex.]

Back to Index

Slide 6:
Flex: PhotoViewer

[Example of a photo viewer application developed in Flex.]

Slide 7:
Flex: Blog Reader

[Example of a blog reader application developed in Flex.]

Slide 8:
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.

Slide 9:
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.

Slide 10:
Accessible Flash

Best practices for creating accessible Flash and Flex applications.

[Image of the Flash Professional 8 packaging.]

Back to Index

Slide 11:
Screen Reader Requirements

JAWS for Windows

Flash Components Scripts

Other Assistive Technologies

  • Window-Eyes, IBM HomePage Reader, HAL/SuperNova, ZoomText, PC-Talker (Japanese), and JAWS-J also interoperate with Flash and Flex content.

Slide 12:
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 at regular intervals.
    • Test for screen reader access at least twice 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.

Slide 13:
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

Slide 14:
Key Concepts: Label (1)

  • Every control should have an associated label.
  • Label should describe function.
  • If function changes, so should label.

Slide 15:
Key Concepts: Label (2)

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.

[Image of the Accessibility panel.]

Back to Index

Slide 16:
Key Concepts: Label (3)

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.

[Image of the Accessibility panel with a .name property specified.]

Slide 17:
Key Concepts: Label (4)

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

Slide 18:
Key Concepts: Label (5)

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"/>

    [Image with "Tool Tip for Image" shown in a tooltip.]

Slide 19:
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.

Slide 20:
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.

Back to Index

Slide 21:
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

Slide 22:
Flash Controls

12 Accessible Flash Components

  • Button
  • Check Box
  • Radio Button
  • Label
  • Combo Box
  • List Box
  • Window
  • Alert
  • Data Grid
  • Text
  • TextArea
  • TextInput

Slide 23:
Flex Controls

26 Accessible Flex 2 Components

  • Accordion
  • Alert
  • Button
  • CheckBox
  • ComboBox
  • DataGrid
  • DateChooser
  • DateField
  • Form
  • Image
  • Label
  • LinkButton
  • List
  • Menu
  • MenuBar
  • Panel
  • RadioButton
  • RadioButtonGroup
  • TabNavigator
  • Text
  • TextArea
  • TextInput
  • TitleWindow
  • ToolTipManager
  • Tree
  • Validator

Slide 24:
Accessible JavaScript Components (1)

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

Slide 25:
Accessible JavaScript Components (2)

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.

Back to Index

Slide 26:
Key Concepts: Structure (1)

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.

Slide 27:
Key Concepts: Structure (2)

There are two methods for controlling the reading order of content:

  • Control using position
  • Control using tabIndex

Slide 28:
Key Concepts: Structure (3)

Control using position

  • Positive Example:
    • WGBH - Zoot Suit Riots
      www.pbs.org/wgbh/amex/zoot/eng_sfeature/pop_zoot.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.

Slide 29:
Key Concepts: Structure (4)

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"/>

Slide 30:
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?

Back to Index

Slide 31:
Resources

Adobe Links

DHTML Links

Slide 32 (last slide):
Better by Adobe™

Back to Index

© 2007 Adobe Systems Incorporated. All rights reserved.

Back to top

© 2003-2016 Gardner Information Design, Inc. All rights reserved.