Testing flash and flex for accessibility indic threads-q11


Published on

Session Presented at 2nd IndicThreads.com Conference On Software Quality held on 25-26 March 2011 in Pune, India. WEB: http://Q11.IndicThreads.com

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Takeaways for audience. At the end of this session audience will be familiar with what is accessibility, importance of accessibility testing and best practices for testing Flash and flex for accessibility.
  • What is Accessibility… definitions
  • Visual: low vision, blindness, color blindness Auditory: hearing loss Motor Impairment: shakiness, paralysis Cognitive / Learning: attention difficulties Age related: eyesight, hearing Accidental: hand injury
  • Blindfold game: use to explain the need of assistive technologies
  • keeping this slide empty for feedback from audience So what should be the solution for this problem? Any guesses?
  • Why assistive technology is used and types of it.
  • Explain reasons to produce accessible products
  • Canada – Common Look and Feel (CLF) UK – Disability Discrimination Act (DDA)/Equality Act 2010 Australia – resembles DDA Germany – Barrier-Free Information Technology Regulation (BITV)
  • Example of accessible product.
  • Before going into details of accessibility testing for Flash/flex, let us see how accessible flash and flex is...
  • Explain why Flash player is popular
  • Explain why flex is popular
  • http://www.adobe.com/accessibility/products/flashplayer/overview.html
  • Special care needs to taken for testing with Assistive Technology. Before testing we need to enable accessibility in flex app.
  • Assistive Technology receives Information exposed to MSAA from Flash application
  • No proper text provided to screen reader
  • Testing flash and flex for accessibility indic threads-q11

    1. 1. Testing Flash and Flex for Accessibility Rashmi Aghor SAS R&D (India) Pvt. Ltd.
    2. 2. Key Takeaways… <ul><li>Importance of accessibility </li></ul><ul><li>Accessibility features in Flash/Flex </li></ul><ul><li>Accessibility testing For Flash/flex </li></ul>
    3. 3. Agenda <ul><li>Accessibility </li></ul><ul><li>Flash/Flex Accessibility </li></ul><ul><li>Accessibility testing for Flash/Flex </li></ul><ul><li>Flex is different… </li></ul><ul><li>Conclusion </li></ul><ul><li>References </li></ul><ul><li>Q & A </li></ul>
    5. 5. What is Accessibility? <ul><li>Accessibility means enabling computer hardware, software and services for universal use, including persons with disabilities. </li></ul><ul><li>Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. </li></ul>
    6. 6. Types of Disabilities <ul><li>Types of Disabilities </li></ul><ul><ul><li>Visual: color blindness </li></ul></ul><ul><ul><li>Auditory </li></ul></ul><ul><ul><li>Motor Impairment </li></ul></ul><ul><ul><li>Cognitive / Learning </li></ul></ul><ul><ul><li>Age related </li></ul></ul><ul><ul><li>Accidental </li></ul></ul>
    7. 7. Color blindness Example Back Normal Color Spectrum Color Spectrum for color blind
    8. 8. Try it yourself… <ul><li>Blind user wants to type mobile number </li></ul><ul><ul><li>Assume that you are blind </li></ul></ul><ul><ul><li>Unplug the Mouse and turn off the monitor </li></ul></ul><ul><ul><li>Open Notepad and enter your mobile number </li></ul></ul><ul><li>Total Keyboard Access </li></ul><ul><ul><li>Unplug the Mouse </li></ul></ul><ul><ul><li>Open Microsoft Word and type a sentence </li></ul></ul><ul><ul><li>Select it, copy and paste in another document </li></ul></ul>
    9. 9. Solution ???
    10. 10. Assistive Technologies <ul><li>Aid for disabled people to use technology </li></ul><ul><li>Utilize the info we provide via accessibility API </li></ul><ul><li>Common types of ATs </li></ul><ul><ul><li>Screen readers for blind users </li></ul></ul><ul><ul><li>Braille displays/keyboards for blind users </li></ul></ul><ul><ul><li>Screen magnifiers for partially sighted users </li></ul></ul><ul><ul><li>Speech-to-text for mobility-impaired users </li></ul></ul>
    11. 11. AT for Blind People: Braille Display
    12. 12. AT for Low Vision
    13. 13. Why Produce Accessible Software? <ul><li>Corporate Social Responsibility </li></ul><ul><li>Compliance with Sec 508/WCAG/ISO </li></ul><ul><li>Community Benefits: Accessibility: For everyone's Benefit </li></ul>
    14. 14. Accessibility Guidelines <ul><li>US Federal - Sec 508 </li></ul><ul><li>Global </li></ul><ul><ul><li>WCAG – Web Content Accessibility guidelines </li></ul></ul><ul><ul><li>ISO </li></ul></ul><ul><li>Country Specific </li></ul><ul><ul><li>Canada – CLF </li></ul></ul><ul><ul><li>UK – DDA/Equality Act 2010 </li></ul></ul><ul><ul><li>Australia – resembles DDA </li></ul></ul><ul><ul><li>Germany – BITV Back </li></ul></ul>
    15. 15. Why Produce Accessible Software? <ul><li>Litigation Risk: Inaccessible Target.com </li></ul><ul><li>Target settled big lawsuit: </li></ul><ul><ul><li>Pay NFB $90,000 for certification and $40,000 per year thereafter. </li></ul></ul><ul><ul><li>Target’s web developers to receive accessibility training by NFB at a cost of up to $15,000 per session. </li></ul></ul><ul><ul><li>Pay damages of at most $7000 per claimant, and $20,000 to the California Center for the Blind on behalf of the primary claimant, Bruce Sexton, Jr. </li></ul></ul><ul><li>Competitiveness/ Market share </li></ul>
    16. 16. Accessible Webcast Sync’d transcript (translate?) Archived video Slides Searchable transcript (ESL)
    18. 18. Adobe Flash Player <ul><li>Cross-platform browser-based application runtime </li></ul><ul><li>Support for mobile devices </li></ul><ul><li>Mobile-ready features for multitouch, gestures, mobile input models. </li></ul><ul><li>Hardware acceleration </li></ul>
    19. 19. Adobe Flex <ul><li>Highly productive, free, open source framework </li></ul><ul><li>Deploy consistently on all major browsers, desktops, and operating systems </li></ul><ul><li>Leverages Adobe® Flash® Player and Adobe AIR® runtimes. </li></ul><ul><li>Used in mobile application development </li></ul>
    20. 20. Is Flash Player Accessible? <ul><li>Integrated support for Microsoft Active Accessibility (MSAA) </li></ul><ul><li>Action Script support for complex, dynamic sites </li></ul><ul><li>Flash content treated as HTML content </li></ul><ul><li>Supports Microsoft Internet Explorer and Mozilla Firefox </li></ul><ul><li>Supports JAWS, Windows Eye and NVDA </li></ul>
    21. 21. Is Flex Accessible? <ul><li>35 accessible components in Flex 4 </li></ul><ul><li>Flash Player 9 or later recommended </li></ul><ul><li>Need to enable accessibility in Flex applications </li></ul>
    23. 23. Accessibility Compliance Validations for Sec 508 W3C WCAG Country specific Browsers IE7 and FF3 VPAT Accessibility Test Results Testing Environment Install Walkthroughs, User guides, list of KB shortcuts Level 1 Test Cases Typical Accessibility Testing Process Color Analyzer Assistive technologies
    24. 24. Taxonomies <ul><li>Accessibility testing categories: </li></ul><ul><ul><li>Keyboard accessibility </li></ul></ul><ul><ul><li>Color – contrast support </li></ul></ul><ul><ul><li>Assistive Technology Compatibility </li></ul></ul>
    25. 25. Keyboard Accessibility testing <ul><li>Tab order </li></ul><ul><ul><li>Top-Bottom, Left-Right </li></ul></ul><ul><ul><li>Logical grouping </li></ul></ul><ul><ul><li>Keyboard navigation support </li></ul></ul><ul><ul><ul><li>Standard Keyboard Navigation supported? </li></ul></ul></ul><ul><ul><ul><li>Shortcut keys for quick navigation </li></ul></ul></ul><ul><ul><li>Example </li></ul></ul>
    26. 26. Keyboard Accessibility testing <ul><ul><li>Keyboard interaction support </li></ul></ul><ul><ul><ul><li>Every interaction possible with mouse is also possible with keyboard only? </li></ul></ul></ul><ul><ul><ul><li>Use the product without mouse… Really </li></ul></ul></ul><ul><li>Consistent, visible focus </li></ul><ul><ul><li>Example </li></ul></ul>
    27. 27. Test for Color – Contrast support <ul><li>No overriding of user selected display attributes </li></ul><ul><li>Color alone not used to convey information </li></ul><ul><li>High Contrast Support </li></ul><ul><ul><ul><li>High Contrast Theme </li></ul></ul></ul><ul><ul><ul><li>Screen Magnifier / browser’s Zoom functionality </li></ul></ul></ul><ul><ul><ul><li>Interface is perceived: Test with color contrast analyzer </li></ul></ul></ul>
    28. 28. Screen Magnification
    29. 29. Color Contrast Analyzer Tool Use droppers to select colors for testing; use drop-down to test alternatives Can test for colorblindness
    30. 30. Color Contrast Analyzer Results
    31. 31. Planning for Assistive Technology <ul><li>Enable accessibility in Flex application </li></ul><ul><ul><ul><li>Set accessible-true in flex-config.xml: Default in Flex 4.1 SDK </li></ul></ul></ul><ul><ul><ul><ul><ul><li><compiler> ... <accessible>true</accessible> ... </compiler> </li></ul></ul></ul></ul></ul><ul><ul><ul><li>Build samples with accessible – true! </li></ul></ul></ul><ul><ul><ul><ul><ul><li>Compile with –accessible=true </li></ul></ul></ul></ul></ul>
    32. 32. Assistive Technology Compatibility <ul><li>Support for keyboard, Screen Reader and MSAA ensures accessibility with any Assistive Technology </li></ul><ul><li>Screen Reader Support </li></ul><ul><ul><li>Is focus tracked? </li></ul></ul><ul><ul><li>Text description of all visual elements </li></ul></ul><ul><ul><li>Reads name and state of controls </li></ul></ul><ul><ul><li>Skip repetitive content </li></ul></ul>
    33. 33. Screen Reader Support <ul><li>How to test? </li></ul><ul><ul><li>Start JAWS </li></ul></ul><ul><ul><li>Turn off monitor and remove mouse </li></ul></ul><ul><ul><li>Start Flash application </li></ul></ul><ul><li>Accessibility Demo with JAWS </li></ul>
    34. 34. MSAA Support <ul><li>MSAA support </li></ul><ul><ul><li>Name, Value, Role, State Exposed </li></ul></ul><ul><ul><li>Change event notification </li></ul></ul><ul><li>How to test ? </li></ul><ul><ul><li>Start MSAA tools </li></ul></ul><ul><ul><ul><li>ACCEVENT – Active Accessibility Event Tester </li></ul></ul></ul><ul><ul><ul><li>INSPECT – Active Accessibility Object Inspector </li></ul></ul></ul><ul><ul><li>Load Flash application </li></ul></ul>
    35. 35. AccEvent32 Showing Events
    36. 36. AccEvent32 Log File
    37. 37. Inspect32
    38. 38. Catch the Defect Hint: The person is using a screen reader
    39. 39. FLEX IS DIFFERENT…
    40. 40. Flex Accessibility Testing Challenges <ul><li>Need ‘JAWS Scripts for Flex’ </li></ul><ul><li>Partial support for MSAA in Flash Player </li></ul><ul><ul><li>IAccessible – tree of arbitrary depth </li></ul></ul><ul><ul><li>AccessibilityImplementation </li></ul></ul><ul><ul><ul><li>no methods supporting Parent/Child relationships </li></ul></ul></ul><ul><ul><ul><li>one level depth </li></ul></ul></ul><ul><ul><ul><li>impacts complex components – Table </li></ul></ul></ul>
    41. 41. Flex Accessibility Testing Challenges <ul><li>Accessibility is not built in… </li></ul><ul><li>Enabling accessibility alters application size </li></ul><ul><li>Expertise and Learning curve </li></ul><ul><li>Automation for accessibility </li></ul>
    42. 42. Flex Accessibility Best Practices <ul><li>Enable application accessibility </li></ul><ul><li>Use accessible components </li></ul><ul><li>Ensure keyboard access </li></ul><ul><li>Control reading order </li></ul><ul><li>Provide instructions, captions and text equivalents </li></ul><ul><li>Use color wisely </li></ul>
    43. 43. Conclusion <ul><li>Accessibility is not only for disabled, it benefits all. It is crucial to test applications for accessibility to ensure conformance with laws and standards and for making interfaces perceivable, operable, and understandable. Let us emphasize on creating universally acceptable products. </li></ul>
    44. 44. References <ul><li>Computer accessibility </li></ul><ul><li>Web accessibility </li></ul><ul><li>WAI: Accessibility Introduction </li></ul><ul><li>Accessibility: For everyone's Benefit </li></ul><ul><li>Inaccessible Target.com </li></ul><ul><li>Adobe Flash accessibility design guidelines </li></ul><ul><li>Flex accessibility </li></ul><ul><li>Standard Keyboard Navigation in Flex </li></ul><ul><li>Flash player 10 VPAT </li></ul><ul><li>Flex Accessibility Best Practices </li></ul><ul><li>Accessibility for Spark Components </li></ul>
    45. 45. Q & A
    46. 46. Thank You