Accessibility in Flex and the flash platform A

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 http: //twitter. com/gobbledygooch

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

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

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

The proposal Is flash accessible? • Define what will support • Define the target technologies • OS • Flash player • Assistive technologies Tip: u o y t a ul wh f e r a c Be se i m o r p http: //www. financeminister. gov. au/media/2010/mr_052010_joint. html

Proposal: W 3 C 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, AAA • Conformance guidelines • Australian Government endorsed it Feb 2010

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

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.

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)

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.

Proposal: Conformance guidelines • Requirements for conformance – Includes conformance level (A, 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. Is flash accessible? • Define which standard to support • Define the target technologies • OS • Flash player • Assistive technologies Tip: u o y t a ul wh f e r a c Be se i m o r p http: //www. financeminister. gov. au/media/2010/mr_052010_joint. html

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.

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.

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

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

The planning • Hours estimation • What to tell the designers • Extra information to add to wireframes Tip: l l a h g u o r h t Think rios scena

Planning 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 • 3. 2. 1 On Focus: When any component recieves focus, it does not initiate a

The development • • • The compiler flag Keyboard accessibility Screen reader accessibility Flex 4 accessible components Creating your own custom components Tip: r o , e l p m i s t i Keep e m i t t inves

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 40 min at a time • Try to get chunks of uninterrupted time • A lot of information is wrong or outdated

Development - compiling Compiling • Adds about 1 k 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 - keyboard Keyboard Is the top left to bottom right tab default order ok? • if not custom tab. Index – every tab. Enabled component has to have one • custom arrow key navigation

Development - keyboard Focus and communicate with the browser • IE 8 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 – 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. Accessibility. Properties • Every display object has one • Name • Description • Silent (go through later) • Also shortcut, autolabelling and force. Simple

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

Development – screenreader Flex 4 prebuilt components • • • Accordion container Advanced. Data. Grid control Alert control Button control Check. Box control Color. Picker control Combo. Box control Data. Grid control Date. Chooser control • • • Date. Field control Form container Image control Label control Link. Button control Menu. Bar control Panel container Radio. Button control • • Radio. Button. Group control Tab. Navigator container Text control Text. Area control Text. Input control Title. Window container Tool. Tip. Manager Tree control

Development – screenreader Flex 4 Forms <mx: Form> <mx: Form. Heading label="Simple Form"/> <mx: Form. Item label="Phone" accessibility. Name="Enter your phone number“> <s: Text. Input accessibility. Name="ET phone home"/> </mx: Form. Item>. . . “Simple Form Enter your phone number ET phone home”

Development – screenreader Hiding from the screenreader accessibility. Enabled="false" • Is Silent to the screenreader • Doesn’t change the keyboard • accessibility. Properties. silent tab. Enabled="false“ • Does not appear in the tab order

Development – Custom components Building your own components 1. Create your component 2. Create an accessibility implementation mx. accessibility. Acc. Impl flash. accessibility. Accessibility. Implementation 3. In your initialize. Accessibility 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.

Testing • • Assistive technologies Lose the mouse Contrast tools External testing centres Tip: t s e t d n a t s e t Test, again

Where to get help • • • Adobe accessibility Bugs database W 3 C Local contacts Blogs Australian Human Rights commission World Wide Web accessibility Tip: f o e t a d e h t Check ation inform

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