Accessibility in Flex (and the flash platform)

1. Accessibility in Flex (and the flash platform) A developer’s journey Carly Gooch

2. Who am I and why am I here? • Senior interactive developer for Speedwell • Typically flex and flash application development • Also Co-manager for the Brisbane Flash Platform Usergroup http://twitter.com/gobbledygooch

3. The accessibility journey • From a developer’s perspective • The client brief – why accessibility • The proposal – promises, assumptions and exclusions • The planning – hours estimation and what to tell the designers • The development – how to make it work • Testing – the tools and techniques • Where to get help and information

4. Clients: The client brief Client 1 Client 2 Client 3 Asks for accessibility Needs to, but doesn’t know it Doesn’t need to

5. Clients: The law 24 Goods, services and facilities It is unlawful for a person who, whether for payment or not, provides goods or services, or makes facilities available, to discriminate against another person on the ground of the other person’s disability: (a) by refusing to provide the other person with those goods or services or to make those facilities available to the other person; or (b) in the terms or conditions on which the first-mentioned person provides the other person with those goods or services or makes those facilities available to the other person; or (c) in the manner in which the first-mentioned person provides the other person with those goods or services or makes those facilities available to the other person. Disability Discrimination Act 1992

6. Clients: What is accessibility and disability Making your service available to everyone • Visual disabilities • Hearing impairments • Physical disabilities • Speech disabilities • Cognitive and neurological disabilities • Multiple disabilities • Aging-related conditions

7. The proposal Be careful what you promise • Is flash accessible? • Define what will support • Define the target technologies • OS • Flash player • Assistive technologies Tip: http://www.financeminister.gov.au/media/2010/mr_052010_joint.html

8. Proposal: W3C WCAG 2.0 • Web Content Accessibility Guidelines 2.0 • Recommendations for making web content more accessible • 12 guidelines in 4 principles: perceivable, operable, understandable, and robust • Testable success criteria at 3 levels A, AA, AAA • Conformance guidelines • Australian Government endorsed it Feb 2010

9. Proposal: W3C WCAG 2.0 documents WCAG 2.0 How to meet • Principles • Guidelines • Success criteria • Conformance • 33 pages • Guidelines • Success criteria • Techniques • 54 pages Techniques for WCAG 2.0 Understanding WCAG 2.0 Browser and assistive technology support notes Examples, code Resources Test procedures TOC 16 pages Intent Benefits to people with disabilities Example scenarios Resources Techniques Diagram adapted from w3C site

10. Proposal: Example criteria – level A • 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A) • Note: This success criterion addresses color perception specifically. Other forms of perception are covered in Guideline 1.3 including programmatic access to color and other visual presentation coding.

11. Proposal: Example criteria – Level AA • 1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)

12. Proposal: Example criteria – Level AAA • 1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA) • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1; • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

13. Proposal: Conformance guidelines • Requirements for conformance • Includes conformance level (A,AA,AAA) • Conformance claims (optional) • Declaration of how you conform • What it means to be accessibility supported • More information in the “understanding accessibility support” section • Make an accessibility support statement including what technology is required • Can not cost a person with a disability any more than a person without a disability and is as easy to find and obtain for a person with a disability as it is for a person without disabilities

14. Proposal: The proposal cont. Be careful what you promise • Is flash accessible? • Define which standard to support • Define the target technologies • OS • Flash player • Assistive technologies Tip: http://www.financeminister.gov.au/media/2010/mr_052010_joint.html

15. Proposal: - target technologies Operating System • The flash player communicates to assistive technologies using Microsoft Active Accessibility • MSAA is currently not supported in the opaque windowless and transparent windowless modes.

16. Proposal: - target technologies Browsers • Browsers • IE • Firefox - needs a bit of work for keyboard • Chrome – when run “--enable-renderer-accessibility” MSAA is currently not supported in the opaque windowless and transparent windowless modes.

17. Proposal: - target technologies Screen readers • Screenreaders we develop/test against • Jaws 10 & 11 • Nvad

18. Proposal: - target technologies Anything else • Flash player 9 or 10 or 10.1 (assuming AS3 usage) • External services – eg Google maps, streamed video

19. The planning Think through all scenarios • Hours estimation • What to tell the designers • Extra information to add to wireframes Tip:

20. Planning Hours estimation • How many custom components? • Time to +Develop + Listen + Navigate without a mouse

21. Planning The designer brief • Read the WCAG guidelines and decide on • Contrast • Layout of text • Layout of items and text alternatives • Content display at various zoom levels • Which prebuilt flex components they can use • Custom components can blow out your budget • No Drag and Drop • No Mouse over

22. Planning Wireframe interaction • Page titles and headings • Reading order and Tab order • Interaction order • Navigational elements • WCAG Rules • eg for online ordering: • Checkbox in addition to submit button • Ability to cancel within a stated timeframe • Each component’s role, name and description • 3.2.1 On Focus: When any component recieves focus, it does not initiate a change of context. (Level A)

23. The development • The compiler flag • Keyboard accessibility • Screen reader accessibility • Flex 4 accessible components • Creating your own custom components Tip: Keep it simple, or invest time

24. Development Tips • NVDA makes flash builder slowly sometimes • Mute sound while coding and then unmute when testing screenreader • Find another source of music • JAWS only allows 40min at a time • Try to get chunks of uninterrupted time • A lot of information is wrong or outdated

25. Development - compiling Compiling • Adds about 1k in overhead per component • -accessible in the command line • Flex Builder 3: change the accessible value in flex-config.xml • Flash Builder 4: On by default • Flash Develop: Tick box in the project properties

26. Development - keyboard Keyboard Is the top left to bottom right tab default order ok? • if not custom tabIndex – every tabEnabled component has to have one • custom arrow key navigation

27. Development - keyboard Focus and communicate with the browser • IE8 will pass the keyboard correctly in and out of the plugin • For firefoxuse the focus command in JS • No current solution for chrome or safari • WCAG states that you can not trap the user’s keyboard

28. Development - keyboard Custom commands • Ctrl F - Search • Ctrl +/- should change text size • Shortcut keys for help and reading the menu

29. Development – Screen reader Screen reader • Flash uses MSAA to communicate with assistive technologies • Considered the server • Components have • Names • Roles • Descriptions

30. Development – Screen reader Accessibility Properties • flash.accessibility.AccessibilityProperties • Every display object has one • Name • Description • Silent (go through later) • Also shortcut, autolabelling and forceSimple

31. Development – screenreader Detecting assistive technologies flash.accessibility.Accessibility.active Assistive technology != Screenreader

32. Development – screenreader Flex 4 prebuilt components • DateField control • Form container • Image control • Label control • LinkButton control • Menu control • MenuBar control • Panel container • RadioButton control • RadioButtonGroup control • TabNavigator container • Text control • TextArea control • TextInput control • TitleWindow container • ToolTipManager • Tree control • Accordion container • AdvancedDataGrid control • Alert control • Button control • CheckBox control • ColorPicker control • ComboBox control • DataGrid control • DateChooser control

33. Development – screenreader Flex 4 Forms <mx:Form> <mx:FormHeading label="Simple Form"/> <mx:FormItem label="Phone" accessibilityName="Enter your phone number“> <s:TextInput accessibilityName="ET phone home"/> </mx:FormItem> ... “Simple Form Enter your phone number ET phone home”

34. Development – screenreader Hiding from the screenreader • accessibilityEnabled="false" • Is Silent to the screenreader • Doesn’t change the keyboard • accessibilityProperties.silent • tabEnabled="false“ • Does not appear in the tab order

35. Development – Custom components Building your own components • Create your component • Create an accessibility implementation mx.accessibility.AccImplflash.accessibility.AccessibilityImplementation • In your initializeAccessibility function create a new instance of your accessibility implementation Note: Flex prebuilt components use internal variables

36. Development – Custom components Custom Events Use the focus to focus in and out of a component Be careful about sending too many commands out to the screenreader.

37. Testing • Assistive technologies • Lose the mouse • Contrast tools • External testing centres Tip: Test, test and test again

38. Where to get help • Adobe accessibility • Bugs database • W3C • Local contacts • Blogs • Australian Human Rights commission - World Wide Web accessibility Tip: Check the date of information

39. Questions • http://twitter.com/gobbledygooch • http://www.koali.com.au