Transcript carlygooch_flexaccessibility

Accessibility in Flex
A developer’s journey
Carly Gooch
(and the flash platform)
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
http://www.financeminister.gov.au/media/2010/mr_052010_joint.html
Proposal:
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
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 w3C 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,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.
Is flash accessible?
• Define which standard to support
• Define the target technologies
• OS
• Flash player
• Assistive technologies
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 or 10.1 (assuming AS3 usage)
• External services – eg Google maps, streamed video
The planning
• Hours estimation
• What to tell the designers
• Extra information to add to wireframes
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
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 40min at a time
• Try to get chunks of uninterrupted time
• A lot of information is wrong or outdated
Development - compiling
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 - keyboard
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 – Screen reader
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 – screenreader
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
<mx:Form>
<mx:FormHeading label="Simple Form"/>
<mx:FormItem label="Phone" accessibilityName="Enter
your phone number“>
<s:TextInput accessibilityName="ET phone home"/>
</mx:FormItem>
...
“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 – Custom components
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.
Testing
•
•
•
•
Assistive technologies
Lose the mouse
Contrast tools
External testing centres
Where to get help
•
•
•
•
•
•
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