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

The client brief

Client 1 Client 2 Client 3

Needs to, but doesn’t know it

Doesn’t need toAsks for

accessibility

Clients:

The law24 Goods, services and facilities

It is unlawful for a person who, whether for payment or not,provides goods or services, or makes facilities available, todiscriminate against another person on the ground of the otherperson’s disability:

(a) by refusing to provide the other person with those goods orservices or to make those facilities available to the otherperson; or(b) in the terms or conditions on which the first-mentionedperson provides the other person with those goods or servicesor makes those facilities available to the other person; or(c) in the manner in which the first-mentioned person providesthe other person with those goods or services or makes thosefacilities available to the other person.

Disability Discrimination Act 1992

Clients:

What is accessibility and disabilityMaking 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:

http://www.financeminister.gov.au/media/2010/mr_052010_joint.html

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 criteriaConformance

33 pages

WCAG 2.0

Guidelines• Success criteria

• Techniques54 pages

How to meet

Understanding WCAG 2.0

IntentBenefits to people with disabilitiesExample scenariosResourcesTechniques

Techniques for WCAG 2.0

Browser and assistive technology support notesExamples, codeResourcesTest procedures

TOC 16 pages

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

http://www.financeminister.gov.au/media/2010/mr_052010_joint.html

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

• 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

• 3.2.1 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 technologiesflash.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”

<mx:Form><mx:FormHeading label="Simple Form"/> <mx:FormItem label="Phone" accessibilityName="Enter your phone number“> <s:TextInput accessibilityName="ET phone home"/> </mx:FormItem>...

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 components1. Create your component2. 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

informatio

n

• Adobe accessibility• Bugs database• W3C• Local contacts• Blogs• Australian Human

Rights commission - World Wide Web accessibility

Questions

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