1.
Accessibility in Flex History, Methods, Concerns, Advice Michelle M Bagur Senior Developer, EffectiveUI [email_address] fugaciousness Slideshare.net/fugaciousness

2.
Introduction: What to Expect <ul><li>Accessibility as a whole </li></ul><ul><ul><ul><li>Definitions, history, necessity, complexity </li></ul></ul></ul><ul><ul><ul><li>The components that comprise accessibility: the web, assistive devices </li></ul></ul></ul><ul><ul><ul><li>Examples (both good and bad) </li></ul></ul></ul><ul><li>Accessibility in Flex </li></ul><ul><ul><ul><li>My participation in this effort </li></ul></ul></ul><ul><ul><ul><li>How it’s supposed to work </li></ul></ul></ul><ul><ul><ul><li>Implementation examples (tips and tricks) </li></ul></ul></ul><ul><ul><ul><li>The outlook for Flex 4 </li></ul></ul></ul>

3.
Definitions and Considerations <ul><li>Basic definition </li></ul><ul><ul><ul><li>Allowing people with disabilities or impairment to use the web or software applications </li></ul></ul></ul><ul><ul><li>Not just one group should be targeted. </li></ul></ul><ul><ul><ul><li>People who are blind, have motor impairment, the elderly, the hard of hearing </li></ul></ul></ul>

4.
A Little History <ul><li>Rehabilitation Act - 1973 </li></ul><ul><ul><ul><li>Prohibits discrimination on basis of disability </li></ul></ul></ul><ul><li>Section 508 - 1998 </li></ul><ul><ul><ul><li>Required Federal agencies to make their electronic and information technology accessible to people with disabilities </li></ul></ul></ul><ul><ul><ul><li>Includes not only internally used applications, but any information that is provided to the general public </li></ul></ul></ul><ul><ul><ul><li>http://www.section508.gov/ has technical standards, training information, FAQs, forums, etc </li></ul></ul></ul>

5.
Acronyms to Know: WAI, W3C, WCAG <ul><li>WWW Consortium (W3C) </li></ul><ul><ul><ul><li>International consortium of member organizations, full time staff, and the public </li></ul></ul></ul><ul><ul><ul><li>Develops interoperable technologies </li></ul></ul></ul><ul><ul><ul><li>Forum for communication and ‘collective understanding’ </li></ul></ul></ul><ul><li>Web accessibility initiative (WAI) </li></ul><ul><ul><ul><li>Part of the W3C </li></ul></ul></ul><ul><ul><ul><li>Develops accessibility guidelines, reports, and resources to help make the Web available to people with disabilities: WCAG </li></ul></ul></ul><ul><li>WCAG (Web content accessibility guidelines) </li></ul><ul><ul><ul><li>Created by the WAI </li></ul></ul></ul><ul><ul><ul><li>Series of documents, part of a bigger series of accessibility guidelines </li></ul></ul></ul><ul><ul><ul><li>Initially published in 1999, Version 2 out in 2008 </li></ul></ul></ul>

6.
The Spirit of Things <ul><li>Principles of accessibility (developed by the WCAG) </li></ul><ul><ul><ul><li>Perceivable </li></ul></ul></ul><ul><ul><ul><li>Operable </li></ul></ul></ul><ul><ul><ul><li>Understandable </li></ul></ul></ul><ul><ul><ul><li>Robust </li></ul></ul></ul><ul><ul><li>Compliance </li></ul></ul><ul><ul><ul><li>How do you know if you comply? </li></ul></ul></ul><ul><ul><ul><ul><li>Test against guidelines </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Find an impaired user </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Combination of automated tools and best judgment </li></ul></ul></ul></ul><ul><ul><ul><li>Is the ‘spirit’ of compliance good enough? </li></ul></ul></ul><ul><ul><ul><ul><li>Alternative approaches, are they different but equal? </li></ul></ul></ul></ul>

7.
Why Does it Matter? <ul><li>Target Lawsuit </li></ul><ul><ul><ul><li>Why were they sued? </li></ul></ul></ul><ul><ul><ul><li>By whom? </li></ul></ul></ul><ul><ul><ul><li>What were the results? </li></ul></ul></ul><ul><li>Read any blog, there are debates amongst people </li></ul><ul><ul><ul><li>Common phrase: Go elsewhere, use another site, businesses will suffer </li></ul></ul></ul><ul><ul><ul><li>Not actually the way it works; what if there are no alternatives? </li></ul></ul></ul><ul><ul><ul><li>Why Target, if they are not a government agency? </li></ul></ul></ul>

8.
Assistive Technologies <ul><li>Keyboard Navigation </li></ul><ul><ul><ul><li>No extra requirements </li></ul></ul></ul><ul><ul><ul><li>Tabbing, hotkeys </li></ul></ul></ul><ul><li>Screen Readers </li></ul><ul><ul><ul><li>JAWS by Freedom Scientific </li></ul></ul></ul><ul><ul><ul><li>Window Eyes by GW Micro </li></ul></ul></ul><ul><ul><ul><li>VoiceOver by Apple </li></ul></ul></ul>

9.
How do Screen Readers Work? <ul><li>MSAA (Microsoft Active Accessibility) </li></ul><ul><ul><ul><li>API introduced in 1997 </li></ul></ul></ul><ul><ul><ul><li>IAccessible COM interface </li></ul></ul></ul><ul><ul><ul><li>Four pieces exposed by API: Name, Type, Value, State </li></ul></ul></ul><ul><ul><ul><li>UI Automation </li></ul></ul></ul><ul><li>Properties </li></ul><ul><li>Client asks server </li></ul><ul><li>“ give me this info” </li></ul><ul><li>get_accRole() </li></ul><ul><li>get_accName() </li></ul><ul><li>get_accDescription() </li></ul><ul><li>get_accState() </li></ul><ul><li>get_accValue() </li></ul><ul><li>get_accParent() </li></ul><ul><li>get_accChildCount() </li></ul>Events Server notifies client “ this just happened” OBJECT_CREATE OBJECT_DESTROY OBJECT_NAMECHANGE OBJECT_FOCUS OBJECT_SELECTION

10.
Examples: You Decide <ul><li>Good? </li></ul><ul><ul><ul><li>www.Amazon.com </li></ul></ul></ul><ul><ul><ul><li>www.dignubia.org (only in IE) </li></ul></ul></ul><ul><li>Bad? </li></ul><ul><ul><ul><li>www.Target.com </li></ul></ul></ul><ul><ul><ul><li>www.Google.com -> www.recipes.com </li></ul></ul></ul><ul><ul><ul><li>http://www.w3.org/WAI/wcag-curric/sam26-0.htm </li></ul></ul></ul><ul><ul><ul><li>http://examples.adobe.com/flex2/inproduct/sdk/flexstore/flexstore.html </li></ul></ul></ul>

11.
Flex 3 and MSAA <ul><li>Three main classes: </li></ul><ul><ul><ul><li>Flash.accessibility.AccessibilityImplementation </li></ul></ul></ul><ul><ul><ul><li>Flash.accessibility.AccessibilityProperties </li></ul></ul></ul><ul><ul><ul><li>Flash.accessibility.Accessibility </li></ul></ul></ul><ul><li>Compile with –accessible = true: </li></ul><ul><ul><ul><li>package mx.controls { </li></ul></ul></ul><ul><ul><ul><li>[AccessibilityClass(implementation=&quot;mx.accessibility.ButtonAccImpl&quot;)] public class Button { … } </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>Initialized with: button.accessibilityImplementation = new </li></ul></ul></ul><ul><ul><ul><li>ButtonAccImpl(button) </li></ul></ul></ul>

12.
Example: AccImpl A Button’s MSAA name is the label that it displays, so JAWS speaks the label class ButtonAccImpl extends AccessibilityImplementation { override public function get_accName():String { return label; } }

13.
AccessibilityProperties <ul><li>Code example </li></ul><ul><ul><ul><li>AccPropertiesEx.mxml </li></ul></ul></ul><ul><ul><ul><li>Accessibility.active </li></ul></ul></ul><ul><ul><ul><li>Accessibility.updateProperties() </li></ul></ul></ul>

14.
How’s it Supposed to Work? <ul><li>Flex 3: </li></ul><ul><ul><ul><li>JAWS 8, 9,or 10 </li></ul></ul></ul><ul><ul><ul><li>Internet Explorer </li></ul></ul></ul><ul><ul><ul><li>JAWS scripts </li></ul></ul></ul><ul><li>The chain of command: </li></ul><ul><ul><ul><li>Flex SDK </li></ul></ul></ul><ul><ul><ul><li>Flash player </li></ul></ul></ul><ul><ul><ul><li>JAWS scripts </li></ul></ul></ul><ul><ul><ul><li>JAWS </li></ul></ul></ul>

15.
The Official Documentation <ul><li>28 Accessible components: </li></ul><ul><ul><ul><li>Accordion </li></ul></ul></ul><ul><ul><ul><li>Advanced Data Grid </li></ul></ul></ul><ul><ul><ul><li>Alert Button </li></ul></ul></ul><ul><ul><ul><li>Checkbox </li></ul></ul></ul><ul><ul><ul><li>ColorPicker </li></ul></ul></ul><ul><ul><ul><li>Combobox </li></ul></ul></ul><ul><ul><ul><li>DataGrid </li></ul></ul></ul><ul><ul><ul><li>DateChooser </li></ul></ul></ul><ul><ul><ul><li>DateFeld </li></ul></ul></ul><ul><ul><ul><li>Form </li></ul></ul></ul><ul><ul><ul><li>Image </li></ul></ul></ul><ul><ul><ul><li>Label </li></ul></ul></ul><ul><ul><ul><li>LinkButton </li></ul></ul></ul><ul><ul><ul><li>List </li></ul></ul></ul><ul><ul><ul><li>Menu </li></ul></ul></ul><ul><ul><ul><li>MenuBar </li></ul></ul></ul><ul><ul><ul><li>Panel </li></ul></ul></ul><ul><ul><ul><li>RadioButton </li></ul></ul></ul><ul><ul><ul><li>RadioButtonGroup </li></ul></ul></ul><ul><ul><ul><li>Slider </li></ul></ul></ul><ul><ul><ul><li>TabNavigator </li></ul></ul></ul><ul><ul><ul><li>Text </li></ul></ul></ul><ul><ul><ul><li>TextInput </li></ul></ul></ul><ul><ul><ul><li>TitleWindow </li></ul></ul></ul><ul><ul><ul><li>TooltipManager </li></ul></ul></ul><ul><ul><ul><li>Tree </li></ul></ul></ul>

16.
Tips and Tricks: Prepare Thyself <ul><li>Make sure scripts are installed: </li></ul><ul><ul><ul><li>Insert + q </li></ul></ul></ul><ul><li>Start tabIndex at 1, rather than 0 </li></ul><ul><ul><ul><li>tabIndex = 1; </li></ul></ul></ul><ul><li>Don’t be afraid of the focusThickness property </li></ul><ul><ul><ul><li>focusThickness = 3; </li></ul></ul></ul><ul><li>Get focus into Flash application (semi successfully) </li></ul><ul><ul><ul><li>ExternalInterface.call( &quot;s = function() {document.getElementById('“ + this.id + &quot;').focus(); }&quot; ); </li></ul></ul></ul><ul><li>Possible method to force the tab to stay within the app </li></ul><ul><ul><ul><li>keyFocusChange=&quot;event.preventDefault(); </li></ul></ul></ul><ul><ul><ul><li>focusManager.getNextFocusManagerComponent(event.shiftKey).setFocus()“ </li></ul></ul></ul><ul><li>Form Validation </li></ul><ul><ul><ul><li>Validation message gets added to end of accessibilityName, should </li></ul></ul></ul><ul><ul><ul><li>get read when field is focused. </li></ul></ul></ul>

17.
Tips and Tricks: Tooltips <ul><li>If control has: </li></ul><ul><ul><ul><li>Tooltip, no name, no description </li></ul></ul></ul><ul><ul><ul><ul><li>Tooltip used for name value and visual tooltip </li></ul></ul></ul></ul><ul><ul><ul><li>Tooltip, has name, no description: </li></ul></ul></ul><ul><ul><ul><ul><li>Tooltip used for description value and visual tooltip </li></ul></ul></ul></ul><ul><ul><ul><li>Tooltip, no name, has description: </li></ul></ul></ul><ul><ul><ul><ul><li>Tooltip used for name value and visual tooltip </li></ul></ul></ul></ul><ul><ul><ul><li>Tooltip, has name, has description: </li></ul></ul></ul><ul><ul><ul><ul><li>Tooltip used only for visual tooltip </li></ul></ul></ul></ul><ul><li>Tooltip bugs: </li></ul><ul><ul><ul><li>Sometimes they’re just not read: NAB </li></ul></ul></ul><ul><ul><ul><li>Can’t read tooltip on textArea if it’s not editable IS a bug </li></ul></ul></ul>

18.
Tips and Tricks: JAWS <ul><li>Press Enter to move into and out of forms mode. This is no longer on by default , in the newest scripts. </li></ul><ul><li>Press Insert + Z to toggle virtual cursor mode. Not possible on a MAC laptop, must be reassigned via JAWS. </li></ul><ul><li>Use JAWS Keyboard manager to reassign keys, make changes to voice, change verbosity. </li></ul><ul><li>JAWS can take over keystrokes, as there is a long list of preassigned key combinations. Be aware if you’re developing when JAWS is running, you will have issues. </li></ul>

19.
The Outlook for Flex 4 <ul><li>“ We will continue to invest in accessibility in each version of Flex, but sometimes that support will be staggered across releases. In Flex 4 we have fixed a number of bugs, and we hope to continue to do so, including backporting those fixes to Flex 3. We are not implementing accessibility for Spark controls in 4.0, but there will be a follow-up release not too long after that will add support in. </li></ul><ul><li>“ We are also investigating the next generation of accessibility support as part of a future version of the Flash Player. Adobe has membership in the relevant committees (like WCAG 2) and we are working with industry leaders to make sure that we're supporting the right things. It will take a release or two for that substantial upgrade to occur, but is definitely on our roadmap.” </li></ul>

20.
Helpful Links and References <ul><li>http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/#diff (examples of disabilities and use cases for assistive technology) </li></ul><ul><li>http://blog.comtaste.com/2007/06/form_fields_focus_and_keyboard.html (keep focus in flash movie) </li></ul><ul><li>http://tinyurl.com/ouccm4 (adobe’s jira accessibility bug list) </li></ul><ul><li>http://www.adobe.com/accessibility/products/flashplayer/overview.html (flash 10 and accessibility) </li></ul><ul><li>http://msdn.microsoft.com/en-us/library/ms697707.aspx (MSAA description) </li></ul><ul><li>http://blogs.adobe.com/accessibility/ (adobe’s blog moderated by Andrew Kirkpatrick) </li></ul><ul><li>http://www.section508.gov/ (the accessibility act) </li></ul><ul><li>http://v1.boxofchocolates.ca/archives/2006/02/09/taking-aim-at-target-dot-com (articles and comments on target lawsuit) </li></ul><ul><li>http://www.w3.org/WAI/ (standards and checklists) </li></ul><ul><li>http://www.jimthatcher.com/testing.htm (walkthrough of testing for accessibility) </li></ul><ul><li>http:// msdn.microsoft.com/en-us/library/ms788733.aspx (ui automation and MSAA ) </li></ul><ul><li>https://share.acrobat.com/adc/document.do?docid=e907b423-0407-46da-a75f-87d7468dd997 (newest scripts) </li></ul>

21.
Special Thanks <ul><li>Gordon Smith: Flex Engineer, Adobe </li></ul><ul><li>Jay Proulx: Enterprise Developer Support Consultant, Tier 3, Adobe </li></ul><ul><li>Andrew Kirkpatrick: Senior Product Manager, Accessibility, Adobe </li></ul><ul><li>John Funk: Solutions Architect, Adobe </li></ul><ul><li>Jonathan Avila: Chief Accessibility Officer, SSB Bart </li></ul><ul><li>Matt Chotin: Flex Product Manager, Adobe </li></ul><ul><li>Matt May: Accessibility Engineer, Adobe </li></ul>