Flex accessibility

Flex accessibility

Adobe Flex and AIR for Accessible Rich Internet Applications Replace with a graphic White Master 5.5 Tall & 4.3 Wide Matt May (@mattmay) 25 Mar 2010 Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 1 What is AIR? Application framework Build desktop applications using Flash, HTML and PDF

AIR 2.0 adds support for MSAA http://adobe.com/products/air http://labs.adobe.com/technologies/air Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 2 What is Flex? Language for creating Flash applications XML-based syntax CSS-based layout ActionScript-based behaviors

Open-source framework Open bug tracking http://adobe.com/products/flex http://labs.adobe.com/technologies/flex Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 3 Building Accessible Applications 28 Accessible Flex 3 Components

Accordion AdvancedDataGrid Alert Button CheckBox ColorPicker ComboBox DataGrid DateChooser DateField Form Image Label LinkButton

List Menu MenuBar Panel RadioButton RadioButtonGroup TabNavigator Text TextArea TextInput TitleWindow ToolTipManager Tree Validator Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 4 Building Accessible Applications 27 Accessible Flex 4 Components

Button CheckBox RadioButton Panel Application TextInput TextArea ScrollBar Spinner NumericStepper Slider List Label

RichText RichEditableText PopUpAnchor ComboBox DropDownList ButtonBar HSlider TabBar TitleWindow ToggleButton VideoPlayer VSlider WindowedApplication Window Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5 Flex 4 and Flash Builder demo

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 6 Planning for Accessibility Consider non-mouse-driven modes of use Keyboard-driven navigation Keyboard-driven input Voice control Consider accessibility-related usage scenarios 7 Color differentiation difficulties Visual acuity limitations

Audio and visual feedback requirements Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 7 7 Building Accessible Applications Best Practices Provide keyboard access Use accessibility-enabled components Convey Relationships Provide closed captions for video Provide instructions Enlist the experts Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 8 8 Building Accessible Applications Provide Keyboard Access 9

The spec should lay out the tab sequence Necessary to detail ways users move through an application Providing a fast, keyboard-driven path for navigating through the application can be beneficial. Need to decide how to reveal the available keyboard sequences to the user. Demo: Defining tab and reading order Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 9 Building Accessible Applications Provide Keyboard Access: Testing 10

Tabbing through controls is a good start Make sure to shift+tab backwards Learn about expected control behaviors Flex Keyboard Documentation: http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/commo n/html/wwhelp.htm?context=LiveDocs_Parts&file=00001025.ht ml Controls: http://msdn.microsoft.com/library/en-us/dnwue/html/ch08c.asp Guidelines for Keyboard User Interface Design: http://msdn2.microsoft.com/en-us/library/ms971323.aspx Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

1 10 0 Building Accessible Applications Use Accessibility-Enabled Components Accessible components are those with built-in MSAA support Even with accessibility enabled, there are accessibility concerns to address. Using custom components adds substantially to development time 11 Assistive technology interoperability Complex keyboard support Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

11 Building Accessible Applications JAWS for Windows http://www.freedomscientific.com/fs_products/software_jaws.asp Flex 3 requires JAWS 8 Flex 4 requires JAWS 10 NVDA for Windows http://nvda-project.org Flash Components Scripts http://www.adobe.com/accessibility/products/flex/jaws.html These scripts handle issues related to Flash components used in Adobe Flex applications Other Assistive Technologies 12 Window-Eyes, IBM HomePage Reader, HAL/SuperNova,

ZoomText, PC-Talker (Japanese), and JAWS-J also interoperate with Flash and Flex content. Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 12 Building Accessible Applications Microsoft MSAA Resources Active Accessibility 2.0 Documentation Microsoft Active Accessibility 2.0 SDK Tools (Inspect32, AccExplore32, AccEvent32) http://www.microsoft.com/downloads/details.aspx?FamilyId= 3755582A-A707-460A-BF21-1373316E13F0&displaylang=en Microsoft Active Accessibility: Architecture 13 http://msdn.microsoft.com/library/default.asp?url=/library/e

n-us/msaa/msaastart_9w2t.asp http://msdn.microsoft.com/library/default.asp?url=/library/e n-us/dnacc/html/actvaccess.asp Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 13 What to know about Flex 3 You have to turn accessibility on Use the JAWS scripts (up to version 10) JAWS 11 works without scripts http://www.adobe.com/accessibility/products/flex/jaws.html May add scripts for better performance in the future

Latest versions are always better JAWS 11 Update, Flex 3.5 SDK and scripts Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 14 Building Accessible Applications Enabling Component Accessibility Edit the flex-config.xml file to set the true Use the accessible option with the command lin Using the command compiler line compiler mxmlc -accessible c:/dev/myapps/appl.mxml mxmlc compiler.accessible c:/dev/myapps/viewer.mxml Adds about 1k in overhead per component Performance impact

15 Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 15 Building Accessible Applications In Flex Builder 3 Select Generate Accessible SWF file in the Project Properties dialog Setting 16 Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. must be modified for each project 16 Building Accessible Applications What Does Enabling Component Accessibility Do? Adds AccessibilityImplementation code for components

Adds support for methods and properties that are important for MSAA accessibility support. Support for assistive technologies (e.g. JAWS screen reader) requires MSAA support Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 17 17 What to know about Flex 4 Use it! Works with JAWS <11 with scripts JAWS 11 works without scripts May add scripts for better performance in the future

Accessibility is on by default in the compiler Major improvements in Flex 3 (Halo) components New support for Flex 4 (Spark) components Available free (open source) at http://www.adobe.com/products/flex/ Flash Builder Flash Catalyst Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 18 Building Accessible Applications Test with MSAA Inspector Tools

19 Quick tool for identifying role and state info Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 1 19 9 Building Accessible Applications Provide Keyboard Access The spec should lay out the tab sequence Necessary to detail ways users move through an application Providing a fast, keyboard-driven path for navigating through the application can be beneficial. Need to decide how to reveal the available keyboard

sequences to the user. Flex Documentation: http://livedocs.adobe.com/flex/3/html/accessible_5.html Demo: Defining tab and reading order Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20 20 Building Accessible Applications Provide Keyboard Access: Moving Focus Flash allows the focus to be programmatically moved, until recently screen readers responded to this in forms mode only. Demo Screen readers maintain an off-screen model which is old versions of screen readers followed instead of the system

focus, except in forms mode. Forms mode is the mode that most interaction with Flex applications will occur with screen readers ensure that users can enter forms mode. Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 21 21 Building Accessible Applications Provide Keyboard Access: Testing Tabbing through controls is a good start Make sure to shift+tab backwards Learn about expected control behaviors Flex 3 Keyboard Documentation: http://livedocs.adobe.com/flex/3/html/accessible_5.html

Controls: http://msdn.microsoft.com/library/en-us/dnwue/html/ch08c.asp Guidelines for Keyboard User Interface Design: http://msdn2.microsoft.com/en-us/library/ms971323.aspx Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 22 2 22 2 Building Accessible Applications Convey Relationships 23 Communicating what is going on in an application is largely a design issue. Assistance can be provided

within the application, in the form of a accessibility information screen. Identifying issues is the most significant challenge. Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 2 23 3 Building Accessible Applications Provide Closed Captions for Video Use captioning tools such as MAGpie or Captionate, with DFXP support Flash can parse XML caption data for display 24 Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

2 24 4 Building Accessible Applications Provide Instructions 25 Use a Help or Site Info screen to provide information about the purpose of the application and accessibility specific instructions Provide detail about how to use controls created using components Non-obvious functionality needs to be revealed for users Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 25 Building Accessible Applications Test with Assistive Technologies - JAWS Forms Mode Screen readers rely on arrow keys to read line by line

In order to enter data into form fields the user must enter a Forms Mode Press Enter to go into forms mode on form controls This also impacts components such as accordion pane, tree control that require system focus Submitting the form will cause the screen reader to exit forms mode To manually exit, press Numpad+Plus to exit forms mode. This is not a common use case. (on a laptop you can either use the integrated keyboard or set JAWS up for laptop layout and use Caps Lock + semi-colon) Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 26 26

Building Accessible Applications Detecting Assistive Technologies The Flash Player is aware of running MSAA clients. Not all MSAA clients are screen readers, so use carefully It is OK to swap out a complex custom control for a simple standard control (or controls) to accomplish the same task. It is NOT OK to replace an entire Flex app with a version that has a linear off-screen reading order. More: http://www.paciellogroup.com/blog/?p=61 Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 27 27

Building Accessible Applications Enlist the Experts 28 May be disabled users May also be people on your staff who have developed the required skills and sensitivities People familiar with accessibility, even if not Flex developers, can provide valuable and time-saving insight into accessibility issues, starting in the design phase. Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 28 Building Accessible Applications User feedback is the final test 29

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 Many users are not familiar with using RIAs User training may be beneficial Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 2 29 9 Building Accessible Applications Implementation details to keep in mind 1 Capabilities.hasAccessibility

Accessibility.active Six properties worth understanding DisplayObject.accessibilityProperties 30 Is a screen reader running? AccessibilityProperties class Does the runtime environment support accessibility? Actually only applies to certain classes: swf, container, button, and text Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 3 30 0

Building Accessible Applications Implementation details to keep in mind 2 Accessibility.updateProperties() Republishes MSAA data Call this after setting one or more accessibilityProperties Accessibility.noAutoLabeling InteractiveObject.tabIndex For controlling tab sequence and reading order. Especially important for dynamic applications

InteractiveObject.keydown including Stage.keyDown 31 AutoLabeling is on by default Easy hook for keyboard shortcuts Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 3 31 1 Building Accessible Applications What does AccessibilityImplementation Provide? Methods for getting and setting roles and states Support for object role constants (~60 roles supported) Support for object state constants (~30 states supported)

Methods for setting MSAA focus and selection, labeling relationships http://www.adobe.com/livedocs/flex/3/langref/flash/ accessibility/AccessibilityImplementation.html Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 32 32 The future of Flash, Flex and AIR IAccessible2 support in the next major version of Flash Player IAccessible2 support in Flex and AIR http://blogs.adobe.com/accessibility Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

33 Flash and WCAG 2.0 Adobe is working with the W3Cs WCAG Working Group to develop and approve techniques for Flash A set of techniques designed to cover all WCAG 2.0 success criteria is expected to be published on the W3C site in about 1 month Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 34 Resources 35 http://www.adobe.com/accessibility/ (public site) http://blogs.adobe.com/accessibility/ (external blog)

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 35

Recently Viewed Presentations

  • Introduction  When we do what is right, others

    Introduction When we do what is right, others

    Incorrect Focus. Don't focus on seeing that justice is done. James 5:1-6 - "Come now, you rich, weep and howl for your miseries which are coming upon you. 2 Your riches have rotted and your garments have become moth-eaten. 3...
  • Metabolism: Introduction - Fortress of Cogitation

    Metabolism: Introduction - Fortress of Cogitation

    Metabolism. The sum of the chemical changes that convert nutrients into energy and the chemically complex products of cells. ... Phototrophs use light; Chemotrophs use Glc, inorganics use S and obtain chem energy through food generated by phototrophs. The Sun...
  • Invertebrates - Council Rock School District

    Invertebrates - Council Rock School District

    Typhlosole - fold in intestines to increase surface area. Anus. Circulation. Closed circulatory system. Blood contains . hemoglobin. 5 . aortic arches . connect. dorsal to ventral blood vessels. Excretion and Respiration. ... Invertebrates Last modified by: Teacher
  • Classification and Introduction to Animals Chapter 18 &amp; 34

    Classification and Introduction to Animals Chapter 18 & 34

    ANIMALS (Triploblastic) Blastopore becomes MOUTH Blastopore becomes ANUS Decide very early (DETERMINATE) Decide later (INDETERMINATE) MOST INVERTEBRATES except ECHINODERMS ALL VERTEBRATES (Fish, amphibians, birds, reptiles, mammals) plus ECHINODERMS SPIRAL cleavage RADIAL cleavage PROTOSTOMES DEUTEROSTOMES "Exception to the rule ...
  • Creative Engagement Strategies Agenda Slides

    Creative Engagement Strategies Agenda Slides

    April 24-26, 2019 - Charlotte Convention Center. NCPTA 2019 Annual Conference. April 27 - 28 Rodeo. April 29 - May 1 Conference. Registration Opens Monday January 14 "Creative Engagement Strategies : Mixing it up" Part of the NCDOT-PTD and NCPTA...
  • To Kill A Mockingbird - Miss Cowin&#x27;s English Literature ...

    To Kill A Mockingbird - Miss Cowin's English Literature ...

    To Kill A Mockingbird By Harper Lee Introduction: Context and Background Objectives Know where and when the novel is set Be able to make links between context and themes Key Words Prejudice Segregation Inequality * * * * * *...
  • Earth&#x27;s Moon - Duplin County Schools

    Earth's Moon - Duplin County Schools

    Regolith. All lunar terrains are mantled with a layer of gray debris derived from a few billion years of bombardment from meteorites. This soil-like layer, called . lunar regolith, is composed of igneous rocks, glass beads, and fine lunar dust....
  • Integrating quotations Tips on how to integrate textual

    Integrating quotations Tips on how to integrate textual

    Options for Integrating Quotations: #3 = Use a sentence. Use a full sentence of your own to introduce a full sentence by the quoted author. You must use a colon to introduce the quotation in this case. Jacob Needleman says...