• Save
Ria User Group Accessibility
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Ria User Group Accessibility

on

  • 2,267 views

 

Statistics

Views

Total Views
2,267
Views on SlideShare
2,152
Embed Views
115

Actions

Likes
1
Downloads
0
Comments
1

4 Embeds 115

http://skillsmatter.com 74
http://smash 39
http://85.92.73.37 1
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • You can also watch it here: http://skillsmatter.com/podcast/os-mobile-server/accessibility-api-in-flex/rl-311
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.”

Ria User Group Accessibility Presentation Transcript

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