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 journeyFrom 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.0IntentBenefits to people with disabilitiesExample scenariosResourcesTechniques

Techniques for WCAG 2.0Browser 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

KeyboardIs 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 EventsUse the focus to focus in and out of a

componentBe careful about sending too many

commands out to the screenreader.

Development – Custom components

Testing• Assistive technologies• Lose the mouse• Contrast tools• External testing

centresTest, 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• http://twitter.com/gobbledygooch• http://www.koali.com.au