Your SlideShare is downloading. ×
0
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Ria User Group Accessibility
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ria User Group Accessibility

1,442

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • You can also watch it here: http://skillsmatter.com/podcast/os-mobile-server/accessibility-api-in-flex/rl-311
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,442
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • The methods of the flash.accessibility.AccessibilityImplementation class are a subset of the IAccessible interface, adapted slightly for ease of use.It class provides a set of methods that allow a component developer to make information about system roles, object based events, and states available to assistive technology. The Flash Player IAccessible interface for a scripted movie clip simply passes most calls from MSAA through to the flash.accessibility.AccessibilityImplementation subclass instance for that component.For example, when a screen reader needs to determine the default action of a mx.controls.Button component instance on the Stage in Flash Player, it calls the IAccessible method get_accDefaultAction() on the IAccessible interface exposed by the Flash Player for that component instance. The request is passed through to the get_accDefaultAction() method of the mx.accessibility.ButtonAccImpl accessibility implementation class instance, which returns the appropriate default action String for a button control, which is “Press.”
  • Transcript

    • 1. Nicolas Yuen<br />nyuen@adobe.com<br />Developing Accessible Flex Applications<br />
    • 2. Agenda<br />Introduction<br />Motivation for Accessibility<br />Flex Accessibility API<br />Building Custom accessible Components<br />Best practices<br />Testing<br />Final word<br />
    • 3. Introduction<br />Consultant for Adobe Professional Services<br />Specialized in developing Rich Internet Applications<br />Developing with Flex for 3 year<br />Worked on a public facing RIA for a government organization<br />Took interest in accessibility<br />
    • 4. Motivation for Accessibility<br />Morale arguments<br />Accessibility is the right thing to do<br />12.8 percent of adults (21-64) are disabled in some way<br />Ensure equal access for individuals with disabilities<br />Improves the application’s design by thinking upfront of accessibility constraints<br />Also benefits the mainstream audience<br />it is our duty to design and develop accessible websites as part of our work<br />
    • 5. Motivation for Accessibility<br />Legal arguments<br /><ul><li>Accessibility is becoming a customer requirement
    • 6. Allows companies to reach a wider audience
    • 7. Can have a significant impact on the perceived brand image
    • 8. Make your website accessible to everyone and you can tell the world about it.
    • 9. pressure on companies and the government to make their websites accessible.
    • 10. Example: Class Action lawsuit for Target.com
    • 11. Mandatory and must have feature for government agencies
    • 12. Europa : Web Accessibility policy
    • 13. all public websites should be accessible by 2010</li></li></ul><li>Motivation for Accessibility – WCAG 2.0<br />About WCAG2<br />The W3C WAI released the WCAG 2.0 in December 2008<br />WCAG 2 follows the spirit of trying to bring anaccessible Web<br />With WCAG 2, “Don’t use x” is no longer valid. It is now up to you, the developer, to work on the direct accessibility of your content, no matter what technology you choose<br />WCAG 2 provides an opportunity for a common approach to web accessibility across countries<br />
    • 14. Motivation for Accessibility – WCAG 2.0<br />About WCAG2<br />4 Principles / 12 guidelines<br />
    • 15. Motivation for Accessibility – WCAG 2.0<br />About WCAG2<br />4 Principles / 12 guidelines<br />Perceivable : <br /><ul><li>Provide Text Alternatives for non text content
    • 16. Time-based Media(Captions or alternatives)
    • 17. Make content Adaptable(simpler or different layout alternative)
    • 18. Distinguishable (sufficient contrast or audio volume)</li></li></ul><li>Motivation for Accessibility – WCAG 2.0<br />About WCAG2<br />4 Principles / 12 guidelines<br />Perceivable : <br /><ul><li>Provide Text Alternatives for non text content
    • 19. Time-based Media(Captions or alternatives)
    • 20. Make content Adaptable(simpler or different layout alternative)
    • 21. Distinguishable (sufficient contrast or audio volume)</li></ul>Operable : <br /><ul><li>Make all functionality available from a keyboard
    • 22. Provide users enough time to read and usecontent
    • 23. Do not design content in a way that is known to cause seizures
    • 24. Provide ways to help users navigate, find content and determine where they are</li></li></ul><li>Motivation for Accessibility – WCAG 2.0<br />About WCAG2<br />4 Principles / 12 guidelines<br />Perceivable : <br /><ul><li>Provide Text Alternatives for non text content
    • 25. Time-based Media(Captions or alternatives)
    • 26. Make content Adaptable(simpler or different layout alternative)
    • 27. Distinguishable (sufficient contrast or audio volume)</li></ul>Understandable: <br /><ul><li>Make text content readable and understandable
    • 28. Make pages and content appear and operate in predictable ways
    • 29. Help users avoid and correct mistakes</li></ul>Operable : <br /><ul><li>Make all functionality available from a keyboard
    • 30. Provide users enough time to read and usecontent
    • 31. Do not design content in a way that is known to cause seizures
    • 32. Provide ways to help users navigate, find content and determine where they are</li></li></ul><li>Motivation for Accessibility – WCAG 2.0<br />About WCAG2<br />4 Principles / 12 guidelines<br />Perceivable : <br /><ul><li>Provide Text Alternatives for non text content
    • 33. Time-based Media(Captions or alternatives)
    • 34. Make content Adaptable(simpler or different layout alternative)
    • 35. Distinguishable (sufficient contrast or audio volume)</li></ul>Understandable: <br /><ul><li>Make text content readable and understandable
    • 36. Make pages and content appear and operate in predictable ways
    • 37. Help users avoid and correct mistakes</li></ul>Operable : <br /><ul><li>Make all functionality available from a keyboard
    • 38. Provide users enough time to read and usecontent
    • 39. Do not design content in a way that is known to cause seizures
    • 40. Provide ways to help users navigate, find content and determine where they are</li></ul>Robust: <br /><ul><li>Maximise compatibility with current and future user agents, including assistive technologies</li></li></ul><li>Flex Accessibility API<br />
    • 41. About Accessibility in Flash<br />Introduced with Flash 6<br />Previously limited to Flash and Flex but not supported in AIR<br />Air 2 now supports Accessibility (built in Flex/Flash)<br />Detailed documentation and Language Reference available<br />Support for assistive technology through Microsoft Active Accessibility (MSAA) API<br />
    • 42. How MSAA works<br />provides a descriptive and standardized way for applications and screen readers to communicate. <br />Middleware architecture that conveys an object model of an application<br />When Internet Explorer or Firefox loads a new page, it sends an event notification to the MSAA system<br />Screen Readers are essentially MSAA clients listening for events<br />
    • 43. Accessible object model in Flash Player<br />The Flash Player's accessible object tree consists of a single top-levelcontainer<br />Contains a flat collection of the following types:<br />Text<br />Input TextField<br />Buttons<br />Simple Movie Clip<br />Scripted Movie Clip<br />
    • 44. Enabling Accessibility for your Flex applications<br />In Flash Builder 4<br />Select “Generate Accessible SWF file” in the Project properties dialog<br />Modfifies the compiler node : <compiler additionalCompilerArguments="-locale en_US" generateAccessible="true"> in the .actionScriptProperties file<br />This is now selected by default in Flash Builder 4<br />At Runtime<br />Append accessible=true to the URL<br /> http://www.mydomain.com/index.html?accessible=true<br />Using the command line compiler<br />Use the Accessible option with MXMLC<br />mxlmc –accessible MyApplication.mxml<br />
    • 45. Enabling Accessibility for your Flex applications<br />Accessibility disabled<br />Accessibility enabled<br />
    • 46. Flex Accessible components and containers <br />Adobe built support for accessibility into Flex MX components and containers<br />Accessible components : 28 for Halo - 19 for Spark<br />ButtonBar<br />DropDownList<br />NumericStepper<br />RichEditableText<br />Spinner<br />TabBar<br />ToggleButton<br />VideoPlayer<br />Accordion<br />AdvancedDataGrid<br />Alert<br />Button<br />CheckBox<br />ColorPicker<br />ComboBox<br />DataGrid<br />DateChooser<br />DateField<br />Form<br />Image<br />Label<br />LinkButton<br />List<br />Menu<br />MenuBar<br />Panel<br />RadioButton<br />RadioButtonGroup<br />Slider<br />TabNavigator<br />Text<br />TextArea<br />TextInput<br />TitleWindow<br />ToolTipManager<br />Tree<br />
    • 47. Accessibility API<br />Contain base classes and implementations for Accessibility<br />DisplayObject has a default implementation with the AccessibilityPropertiesclass<br />Flex Accessible components have extra code and classes<br />The AccessibilityProperties has the following options:<br /><ul><li> Name : Provides a name for this display object in the accessible presentation
    • 48. ForceSimple: If true, causes Flash Player to exclude child objects within this display object from the accessible presentation.
    • 49. Description :Provides a description for this display object in the accessible presentation
    • 50. Silent: If true, excludes this display object from accessible presentation.
    • 51. Shortcut: Indicates a keyboard shortcut associated with this display object.</li></li></ul><li>Accessibility API<br />Instanciating the flash.accessiblity.AccessibilityProperties class<br />In ActionScript<br /><?xml version="1.0" encoding="utf-8"?><br /><s:Applicationxmlns:fx=http://ns.adobe.com/mxml/2009xmlns:s="library://ns.adobe.com/flex/spark” mlns:mx="library://ns.adobe.com/flex/mx” creationComplete="creationCompleteHandler(event)”><br /> <fx:Script><br /> <![CDATA[<br /> importmx.events.FlexEvent;<br /> protectedfunctioncreationCompleteHandler(event:FlexEvent):void<br /> {<br /> //With the Flex 4 SDK - introduction of convenience accessors<br />accessibleTxt.accessibilityName = "Spark Accessible Text";<br />accessibleTxt.accessibilityDescription = "a short description for the text content”;<br /> //With the Flex 3 SDK - Manually create an AccessibilityProperties instance<br />accessibleTxt.accessibilityProperties = newAccessibilityProperties();<br />accessibleTxt.accessibilityProperties.name = "Accessible Text";<br />Accessibility.updateProperties();<br /> }<br /> ] ]><br /></fx:Script><br /> <s:TextArea id="accessibleTxt" /><br /></s:Application><br /><?xml version="1.0" encoding="utf-8"?><br /><s:Applicationxmlns:fx=http://ns.adobe.com/mxml/2009xmlns:s="library://ns.adobe.com/flex/spark” mlns:mx="library://ns.adobe.com/flex/mx” creationComplete="creationCompleteHandler(event)”><br /> <fx:Script><br /> <![CDATA[<br /> importmx.events.FlexEvent;<br /> protectedfunctioncreationCompleteHandler(event:FlexEvent):void<br /> {<br /> //With the Flex 4 SDK - introduction of convenience accessors<br />accessibleTxt.accessibilityName = "Spark Accessible Text";<br />accessibleTxt.accessibilityDescription = "a short description for the text content”;<br /> //With the Flex 3 SDK - Manually create an AccessibilityProperties instance<br />accessibleTxt.accessibilityProperties = newAccessibilityProperties();<br />accessibleTxt.accessibilityProperties.name = "Accessible Text";<br />Accessibility.updateProperties();<br /> }<br /> ] ]><br /></fx:Script><br /> <s:TextArea id="accessibleTxt" /><br /></s:Application><br />
    • 52. Accessibility API<br />Instanciating the flash.accessiblity.AccessibilityProperties class<br />In MXML<br /><?xml version="1.0" encoding="utf-8"?><br /><s:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009" <br />xmlns:s="library://ns.adobe.com/flex/spark" <br />xmlns:mx="library://ns.adobe.com/flex/mx"><br /> <s:TextArea id="accessibleTxt" accessibilityName="Spark Accessible Text"<br />accessibilityEnabled="true"<br />accessibilityDescription="A short description" /><br /></s:Application><br />
    • 53. Accessibility API<br />The flash.accessibility.Accessibility class provides the following methods and properties:<br />active : Indicates whether a screen reader is currently active and the player is communicating with it.<br />updateProperties():Tells Flash Player to apply any accessibility changes made by using the DisplayObject.accessibilityProperties property.<br />sendEvent: Sends an event to the Microsoft Active Accessibility API.<br />What happens when your OS doesn’t have an active screen reader?<br />Calling updateProperties() will throw an IllegalOperatorErrorexception<br />Use flash.system.Capabilities.hasAccessibilityto detected if the system supports Accessibility<br />And the active property to prevent a call to updateProperties()<br />privatefunctionupdateProperties():void<br />{<br /> if (Accessibility.active)<br /> {<br />Accessibility.updateProperties();<br /> }<br />}<br />
    • 54. The flash.accessibility.AccessibilityImplementation class<br />Flash provides the flash.accessibility.AccessibilityImplementation class for exposing accessible components<br />subset of the IAccessible interface, adapted slightly for ease of use.<br />The Flash Player IAccessible interfacepasses most calls from MSAA to thesubclass instance for that component <br />Flex components with Accessibility will be treated as scripted movie clips<br />In Flex, this class is extended by mx.accessibility.AccImpl<br />
    • 55. The mx.accessibility.AccImpl class<br />The AccImplclass extends AccessbilityImplementation<br />This is the base class for Flex Accessible Components <br />You extend this class or one of its subclass to create your own accessible components<br />The AccImplclass exposes properties and methods to react to user gestures<br />Properties<br />role: MSAA constant representing the object’s type<br />master: reference to the targeted UIComponent<br />eventsToHandle: list of events dispatched by the master component<br />Method<br /><ul><li>eventHandler() : unique handler for the list of events above</li></li></ul><li>Building Custom Accessible Components<br />
    • 56. Building Custom Accessible Components<br />Developers need to be able to provide their own accessibility implementations for custom component<br />You create a new accessibility implementation by extending mx.accessibility.AccImpl for each new component<br />Consider two primary forms of guidance:<br />MSAA documentation has guidelines for objects based on the component type<br />Look at a similar component in an HTML page<br />Make sure you implement keyboard navigation and focus management<br />Go for the easy path and extend accessible components if possible <br />
    • 57. Building Custom Accessible Components<br />Let’s start with an example : Contextual help component<br />You will need to create your implementation class by extending AccImpl<br />The AccConst class provides all the MSSA constants you need.<br />You will have to override some of the methods from the IAccessible interface<br />
    • 58. Building Custom Accessible Components<br />Let’s first create our visual component – the HelpButton class<br />Defining a custom accessibility implementation for a component requires changes the component class file<br />First thing to do – add the AccessibilityClassmetatada tag to let the compiler know which AccessibilityImplementation to use<br />[AccessibilityClass(implementation=”component.HelpButtonAccImpl")]<br />Add a placeholder for the mix-in function<br />mx_internal static var createAccessibilityImplementation:Function; <br />This createAccessibilityImplementation() method will be assigned by the PopUpButtonAccImpl accessibility implementation class we'll create<br />Override the UIComponent.initializeAccessibility() method with the following to initialize the AccessibilityImplementation for a given component instance at runtime.<br />overrideprotectedfunctioninitializeAccessibility():void<br /> {<br /> if (HelpButton.createAccessibilityImplementation != null)<br />{<br />HelpButton.createAccessibilityImplementation( this );<br />}<br /> }<br />
    • 59. Creating the accessibility implementation<br />Creating the HelpButtonAccImpl which is a subclass of mx.accessibility.AccImpl<br />Constructor<br />We set the appropriate role for the component based on the MSAA constants<br />publicfunctionHelpButtonAccImpl(master:UIComponent)<br />{<br /> super( master );<br /> role = AccConst.ROLE_SYSTEM_PUSHBUTTON;<br />}<br />
    • 60. Creating the accessibility implementation<br />Initializing Accessibility for the host component<br />Initializes the creatAccessibilityImplementation property we declared on the host component<br />Creating a new acessibiliyImplementation for each instances of the host component<br />mx_internalstaticfunctioncreateAccessibilityImplementation ( component:UIComponent):void<br />{<br />component.accessibilityImplementation = new HelpButtonAccImpl(component);<br />}<br />publicstaticfunctionenableAccessibility():void<br />{<br />HelpButton.createAccessibilityImplementation = createAccessibilityImplementation;<br />}<br />
    • 61. Creating the accessibility implementation<br />Managing events that will an assistive technology will need to react to<br />Overriding the eventToHandle methods<br />Overriding the EventHandler method to manage these events<br />overrideprotectedfunctiongeteventsToHandle():Array<br />{<br /> returnsuper.eventsToHandle.concat([ Event.Change]);<br />}<br />overrideprotectedfunctioneventHandler(event:Event):void<br />{<br />super.eventHandler( event );<br /> switch (event.type)<br /> {<br /> caseEvent.CHANGE:<br />Accessibility.sendEvent(master, 0, AccConst.EVENT_OBJECT_STATECHANGE);<br />Accessibility.sendEvent(master, 0, AccConst.EVENT_OBJECT_NAMECHANGE);<br />Accessibility.sendEvent(master, 0, AccConst.EVENT_OBJECT_SHOW);<br />Accessibility.sendEvent(master, 0, AccConst.EVENT_OBJECT_FOCUS);<br />Accessibility.updateProperties();<br /> break;<br /> }<br />}<br />
    • 62. Creating the accessibility implementation<br />We now need to override methods from the IAccessible interface<br />Overriding the EventHandler method to manage these events<br />overrideprotectedfunctiongetName(childID:uint):String<br />{<br />varlabel:String = helpButton.label;<br />label = ( label != null && label != "" ) ? label : ""; <br />if( helpButton.selected )<br />{<br />label = label + ". " + helpButton.helpText;<br />}<br />return label; <br />}<br />overridepublicfunctionget_accName(childID:uint):String<br />{<br />varaccName:String = AccImpl.getFormName(master);<br />accName += getName(childID) + getStatusName();<br />return (accName != null && accName != "") ? accName : null;<br />}<br />
    • 63. Creating the accessibility implementation<br />We now need to override methods from the IAccessible interface<br />overridepublicfunctionget_accDefaultAction(childID:uint):String<br />{<br /> return"Press";<br />}<br /> */<br />overridepublicfunctionget_accState(childID:uint):uint<br />{<br />varaccState:uint = getState(childID);<br /> if (HelpButton(master).selected)<br />accState |= AccConst.STATE_SYSTEM_PRESSED;<br /> returnaccState;<br />}<br />
    • 64. Best Practices<br />
    • 65. Best Practices – Reading order<br />Reading order must match the content of the application<br />Default order is Left-Right/Top-Bottom<br />Possible to override but not straightforward :<br />Tab order is flat<br />Doesn’t provide hierarchy<br />If overridden the tab index must be specified to ALL component in the application<br />Allocate slots for each part of your application. <br />
    • 66. Best Practices – Reading order<br />Controlling the reading order in MXML<br /><mx:Form label="login"><br /> <mx:FormItem label="Username"><br /> <mx:TextInputtabIndex="1"/><br /> </mx:FormItem><br /> <mx:FormItemlabel="Password"><br /> <mx:TextInputtabIndex="2"/><br /> </mx:FormItem><br /> <mx:HBox><br /> <mx:Buttonlabel="Reset" tabIndex="3"/><br /> <mx:Buttonlabel="Login" tabIndex="4"/><br /> </mx:HBox><br /></mx:Form><br />
    • 67. Best Practices – Global navigation<br />Extremely different from an HTML Page<br />What happens when you navigate ( Changing state or switching content )?<br />By default : nothing!<br />Example : Login screen to dashboard screen<br />Notify the user that a change occurred<br />Explain briefly the new content and the purpose of the screen<br />Set the focus on a relevant component<br />Consider non-mouse driven navigation<br />Everything should be accessible using the keyboard<br />Make sure your navigation components have simple and explicit names<br />Provide auto-scroll when focusing a component<br />
    • 68. Best Practices – Pop Ups<br />What happens by default : again, nothing<br />Correct behavior : <br />Read the title followed by the content of the pop up<br />Set the focus on the default button ( e.g. cancel or ok)<br />Disable the background : the rest of the application is hidden to the screen reader<br />Use a default key to close pop ups (commonly the ESC key)<br />
    • 69. Best Practices - Forms<br />Use Form and FormItem for user input<br />Provide out of the box accessibility features<br />Mandatory Field<br />Validation<br />Set focus on the first input field when entering a form<br />Make sure the user can enter “Form mode” with his screen reader<br />What happens when the validation fails?<br />Focus on the first error<br />Explicitly warn the user that the form is invalid<br />If possible specify the number of errors<br />
    • 70. Best Practices – Adjustable Interface / High contrast<br />Provide resizable text<br />Screen magnification<br />A High constrast version<br />Alternative css<br />Save user preferences<br />
    • 71. Best Practices – Video<br />Demo<br />
    • 72. Best Practices – Context ad relationship<br />Provide context and relationship :<br />Applications that assume comprehension of visual relationships require extra attention ( i.e hierarchical data)<br />Explicitly add context to links/buttons whenever possible (e.g. :Edit --> Edit your profile)<br />Otherwise use tooltips or description to give more information. <br />
    • 73. Best Practices – visual content<br />Consider users with visual acuity limitations :<br />Don’t rely on colors/images to convey information<br />Provide caption to any images<br />Disable animations<br />Provide instructions:<br />Non-obvious functionality needs to be revealed for users<br />
    • 74. Testing Accessibility<br />
    • 75. Testing Accessibility<br />MSAA Inspector Tools:<br />Quick tool for identifying role and state info<br />Much faster to test a component<br />Screen reader : Jaws<br />Navigation (test with your keyboard ) : <br />Tabbing through controls is a good start<br />Make sure to shift+tab backwards<br />Try to turn off your monitor and use the application<br />Perform user testing<br />
    • 76. Final word<br />Accessibility is not an easy task<br />Allocate enough time on the project<br />Keep accessibility in mind during all phases ( starting with the design phase)<br />Involve users as soon as possible : <br />Regular users of assistive technologies will provide the most accurate information<br />An accessible application is not necessarily usable – allow time for user testing<br />User expectations are a possible issue<br />Don’t put accessibility on a TODO at the end of the project<br />
    • 77. Questions<br />?<br />

    ×