1. 2005 Adobe Systems Incorporated. All Rights Reserved. 1 Accessibility for Rich Internet Applications Andrew Kirkpatrick Corporate Accessibility Engineering Lead Adobe Systems

2. 2005 Adobe Systems Incorporated. All Rights Reserved. 2 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

3. 2005 Adobe Systems Incorporated. All Rights Reserved. 3 What Are Rich Internet Applications?  Examples  Amazon: http://amazon.com/http://amazon.com/  Expedia: http://www.expedia.com/http://www.expedia.com/  Simple: http://www.google.com/webhp?complete=1&hl=enhttp://www.google.com/webhp?complete=1&hl=en  Flex Store: http://www.adobe.com/go/flex_flexstore_apphttp://www.adobe.com/go/flex_flexstore_app  Flex Photo Viewer: http://www.adobe.com/go/flex_photoviewer_apphttp://www.adobe.com/go/flex_photoviewer_app  Flex Blog Reader: http://flexapps.macromedia.com/flex15/blogreader/blogreader.mxml http://flexapps.macromedia.com/flex15/blogreader/blogreader.mxml

4. 2005 Adobe Systems Incorporated. All Rights Reserved. 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.  http://www.adobe.com/products/flex/ http://www.adobe.com/products/flex/  Flex applications display in the Flash player  Flex applications are delivered as.swf files

5. 2005 Adobe Systems Incorporated. All Rights Reserved. 5 Flex: FlexStore

6. 2005 Adobe Systems Incorporated. All Rights Reserved. 6 Flex: PhotoViewer

7. 2005 Adobe Systems Incorporated. All Rights Reserved. 7 Flex: Blog Reader

8. 2005 Adobe Systems Incorporated. All Rights Reserved. 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.

9. 2005 Adobe Systems Incorporated. All Rights Reserved. 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.

10. 2005 Adobe Systems Incorporated. All Rights Reserved. 10 Accessible Flash Best practices for creating accessible Flash and Flex applications

11. 2005 Adobe Systems Incorporated. All Rights Reserved. 11 JAWS for Windows  http://www.freedomscientific.com/fs_products/software_jaws.asp 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/j aws.html http://www.adobe.com/macromedia/accessibility/features/flex/j aws.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

12. 2005 Adobe Systems Incorporated. All Rights Reserved. 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 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

13. 2005 Adobe Systems Incorporated. All Rights Reserved. 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

14. 2005 Adobe Systems Incorporated. All Rights Reserved. 14 Key Concepts: Label  Every control should have an associated label  Label should describe function  If function changes, so should label

15. 2005 Adobe Systems Incorporated. All Rights Reserved. 15 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

16. 2005 Adobe Systems Incorporated. All Rights Reserved. 16 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

17. 2005 Adobe Systems Incorporated. All Rights Reserved. 17 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();

18. 2005 Adobe Systems Incorporated. All Rights Reserved. 18 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.

19. 2005 Adobe Systems Incorporated. All Rights Reserved. 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

20. 2005 Adobe Systems Incorporated. All Rights Reserved. 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.

21. 2005 Adobe Systems Incorporated. All Rights Reserved. 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  http://www.w3.org/TR/aria-roadmap/ http://www.w3.org/TR/aria-roadmap/  IBM recently released IAccessible2 with support for this roadmap

22. 2005 Adobe Systems Incorporated. All Rights Reserved. 22 Flash Controls 12 Accessible Flash components  Button  Check Box  Radio Button  Label  Combo Box  List Box  Window  Alert  Data Grid  Text  TextArea  TextInput

23. 2005 Adobe Systems Incorporated. All Rights Reserved. 23 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

24. 2005 Adobe Systems Incorporated. All Rights Reserved. 24 Accessible JavaScript Components  IBM is checking accessibility fixes into the Dojo (http://www.dojotoolkit.org) libraryhttp://www.dojotoolkit.org  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/)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.

25. 2005 Adobe Systems Incorporated. All Rights Reserved. 25 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.

26. 2005 Adobe Systems Incorporated. All Rights Reserved. 26 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.

27. 2005 Adobe Systems Incorporated. All Rights Reserved. 27 Key Concepts: Structure  There are two methods for controlling the reading order of content  Control using position  Control using tabIndex

28. 2005 Adobe Systems Incorporated. All Rights Reserved. 28 Key Concepts: Structure Control using position  Positive Example:  WGBH – Zoot Suit Riots www.pbs.org/wgbh/amex/zoot/eng_sfeat ure/ mx/pop_zoot_mx.html www.pbs.org/wgbh/amex/zoot/eng_sfeat ure/ 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

29. 2005 Adobe Systems Incorporated. All Rights Reserved. 29 Key Concepts: Structure 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

30. 2005 Adobe Systems Incorporated. All Rights Reserved. 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?

31. 2005 Adobe Systems Incorporated. All Rights Reserved. 31 Resources Adobe Links  Adobe Accessibility Resource Center adobe.com/accessibility adobe.com/accessibility  Flash Accessibility Best Practices adobe.com/resources/accessibility/best_practices/bp_fp.html adobe.com/resources/accessibility/best_practices/bp_fp.html DHTML Links  http://developer.mozilla.org/en/docs/Key- navigable_custom_DHTML_widgets 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/tabpanel  http://www.mozilla.org/access/dhtml/class/tree http://www.mozilla.org/access/dhtml/class/tree

32. 2005 Adobe Systems Incorporated. All Rights Reserved. 32