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

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

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

The client brief Client 1Client 2Client 3 Needs to, but doesn’t know it Doesn’t need to Asks for accessibility 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 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 Clients :

The proposal Be careful what you promise Is flash accessible? Define what will support Define the target technologies OS Flash player Assistive technologies Tip:

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 Proposal:

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

Example criteria – level A 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.Guideline 1.3 Proposal:

Example criteria – Level AA 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)captions images of texttext assistive technology Proposal:

Example criteria – Level AAA 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)textimages of text contrast ratio Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;Large-scale 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.user interface componentpure decoration Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement. 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 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: Proposal:

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. Proposal: - target technologies

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. Proposal: - target technologies

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

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

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

Hours estimation How many custom components? Time to +Develop + Listen + Navigate without a mouse 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 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 On Focus: When any component recieves focus, it does not initiate a change of context. (Level A) Planning

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

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 Development

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 Development - compiling

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 Development - keyboard

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

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

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

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

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

Flex 4 prebuilt components Accordion container AdvancedDataGrid control Alert control Button control CheckBox control ColorPicker control ComboBox control DataGrid control DateChooser control 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 Development – screenreader

Flex 4 Forms “Simple Form Enter your phone number ET phone home”... 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 Development – screenreader

Building your own components 1.Create your component 2.Create an accessibility implementation mx.accessibility.AccImpl flash.accessibility.AccessibilityImplementation 3.In your initializeAccessibility function create a new instance of your accessibility implementation Note: Flex prebuilt components use internal variables 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. Development – Custom components

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

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

Questions