Accessibility in Flex (and the flash platform)
description
Transcript of Accessibility in Flex (and the flash platform)
![Page 1: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/1.jpg)
Accessibility in Flex (and the flash platform)
A developer’s journey
Carly Gooch
![Page 2: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/2.jpg)
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
![Page 3: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/3.jpg)
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
![Page 4: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/4.jpg)
The client brief
Client 1 Client 2 Client 3
Needs to, but doesn’t know it Doesn’t need toAsks for
accessibility
Clients:
![Page 5: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/5.jpg)
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:
![Page 6: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/6.jpg)
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:
![Page 7: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/7.jpg)
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
![Page 8: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/8.jpg)
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:
![Page 9: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/9.jpg)
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:
![Page 10: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/10.jpg)
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:
![Page 11: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/11.jpg)
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:
![Page 12: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/12.jpg)
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:
![Page 13: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/13.jpg)
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:
![Page 14: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/14.jpg)
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:
![Page 15: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/15.jpg)
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
![Page 16: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/16.jpg)
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
![Page 17: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/17.jpg)
Screen readers• Screenreaders we develop/test against
– Jaws 10 & 11– Nvad
Proposal: - target technologies
![Page 18: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/18.jpg)
Anything else• Flash player 9 or 10 or 10.1 (assuming AS3
usage)• External services – eg Google maps,
streamed video
Proposal: - target technologies
![Page 19: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/19.jpg)
The planning
Think
through all
scenarios
• Hours estimation• What to tell the
designers• Extra information to
add to wireframes
Tip:
![Page 20: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/20.jpg)
Hours estimation• How many custom components?• Time to
+Develop+ Listen+ Navigate without a mouse
Planning
![Page 21: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/21.jpg)
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
![Page 22: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/22.jpg)
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
![Page 23: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/23.jpg)
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
![Page 24: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/24.jpg)
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
![Page 25: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/25.jpg)
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
![Page 26: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/26.jpg)
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
![Page 27: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/27.jpg)
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
![Page 28: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/28.jpg)
Custom commands• Ctrl F - Search• Ctrl +/- should change text size• Shortcut keys for help and reading the menu
Development - keyboard
![Page 29: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/29.jpg)
Screen reader• Flash uses MSAA to communicate with assistive
technologies– Considered the server
• Components have – Names– Roles– Descriptions
Development – Screen reader
![Page 30: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/30.jpg)
Accessibility Properties• flash.accessibility.AccessibilityProperties• Every display object has one
• Name• Description• Silent (go through later)
• Also shortcut, autolabelling and forceSimple
Development – Screen reader
![Page 31: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/31.jpg)
Detecting assistive technologiesflash.accessibility.Accessibility.active
Assistive technology != Screenreader
Development – screenreader
![Page 32: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/32.jpg)
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
![Page 33: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/33.jpg)
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
![Page 34: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/34.jpg)
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
![Page 35: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/35.jpg)
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
![Page 36: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/36.jpg)
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
![Page 37: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/37.jpg)
Testing• Assistive technologies• Lose the mouse• Contrast tools• External testing
centresTest, test
and test
again
Tip:
![Page 38: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/38.jpg)
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
![Page 39: Accessibility in Flex (and the flash platform)](https://reader036.fdocuments.net/reader036/viewer/2022081604/56816857550346895dde7d36/html5/thumbnails/39.jpg)
Questions• http://twitter.com/gobbledygooch• http://www.koali.com.au