Post on 27-Dec-2015
2005 Adobe Systems Incorporated. All Rights Reserved.1
Accessibility for Rich Internet Applications
Andrew Kirkpatrick
Corporate Accessibility Engineering Lead
Adobe Systems
2005 Adobe Systems Incorporated. All Rights Reserved.2
What Are Rich Internet Applications?
Web applications that have functionality comparable to that of traditional desktop applications
Common technologies Flash / Flex
XHTML/CSS/JS (often with AJAX)
Java
2005 Adobe Systems Incorporated. All Rights Reserved.3
What Are Rich Internet Applications?
Examples Amazon: http://amazon.com/
Expedia: http://www.expedia.com/
Simple: http://www.google.com/webhp?complete=1&hl=en
Flex Store: http://www.adobe.com/go/flex_flexstore_app
Flex Photo Viewer: http://www.adobe.com/go/flex_photoviewer_app
Flex Blog Reader: http://flexapps.macromedia.com/flex15/blogreader/blogreader.mxml
2005 Adobe Systems Incorporated. All Rights Reserved.4
What is Flex?
Adobe® Flex™ 2 software is a rich Internet application framework based on Adobe Flash® that will enable you to productively create beautiful, scalable applications that can reach virtually anyone on any platform.
http://www.adobe.com/products/flex/
Flex applications display in the Flash player
Flex applications are delivered as .swf files
2005 Adobe Systems Incorporated. All Rights Reserved.8
What Accessibility Issues Exist?
Additional controls not previously available in web pages New controls such as “tab navigator” and “date chooser” have no HTML analog
Dynamically updating content users may not be aware that content has changed, or where the new content is
in the application
These issues are not new, but are more commonly seen today
…also “Standard” accessibility issues Image equivalents
Color / Contrast
Form labeling
Etc.
2005 Adobe Systems Incorporated. All Rights Reserved.9
Users to Support
Users who can only use the keyboard
Users who are Blind or Visually Impaired (screen reader and screen magnifier users)
Users requiring improved contrast
Users who are deaf or hard of hearing
Users with cognitive impairments
Users speaking different languages
Support for different users requires varying levels of attention from the developer.
2005 Adobe Systems Incorporated. All Rights Reserved.10
Accessible Flash
Best practices for creating accessible Flash and Flex applications
2005 Adobe Systems Incorporated. All Rights Reserved.11
JAWS for Windows
http://www.freedomscientific.com/fs_products/software_jaws.asp JAWS 4.5, 6.1, 6.2, 7.x, 8.x provide solid support for
Flash and Flex content Flex 2.0 was developed with JAWS 6.1 as the test version
Flash Components Scripts http://www.adobe.com/macromedia/accessibility/
features/flex/jaws.html These scripts handle issues related to Flash components
used in Adobe Flex applications
Other Assistive Technologies Window-Eyes, IBM HomePage Reader, HAL/SuperNova,
ZoomText, PC-Talker (Japanese), and JAWS-J also interoperate with Flash and Flex content.
Screen Reader Requirements
2005 Adobe Systems Incorporated. All Rights Reserved.12
Testing Flash and Flex for Accessibility
Designers are visual in their way of looking at the world
Devote time to learning keyboard shortcuts, then use them
Devote time to learning the screen reader, then use it
Test for accessibility are regular intervals Test for screen reader access at least twice times a day
Test other use cases at least once a week (more often on compressed schedules)
Involve people with disabilities in the process User testing for large scale projects
Email based feedback for smaller projects
2005 Adobe Systems Incorporated. All Rights Reserved.13
Key Concepts
Label What is this thing?
Role What does this thing do?
State Is this thing on or off?
Structure How does this thing relate to
the rest of the things on the screen?
Flex simplifies all of these
2005 Adobe Systems Incorporated. All Rights Reserved.14
Key Concepts: Label
Every control should have an associated label
Label should describe function
If function changes, so should label
2005 Adobe Systems Incorporated. All Rights Reserved.15
Key Concepts: Label
Assigning labels Auto-labeling is enabled by
default
Enabled for an entire movie
Assumes text contained within an object serves as the label
Will only use one text object
For components, text above or to the left will be read as the label
Assigning a .name value overides auto-label feature
2005 Adobe Systems Incorporated. All Rights Reserved.16
Key Concepts: Label
Assigning labels Labels can be assigned using
the .name property.
There are two ways of assigning the .name property.
First, you can use the Accessibility panel.
Keep values descriptive of function, not the control itself
2005 Adobe Systems Incorporated. All Rights Reserved.17
Key Concepts: Label
Assigning labels Labels can be assigned using ActionScript
Three step process
Create accessibility object for each instance (once)
Assign properties
Update accessibility object (once per event)
_root.city4_mc._accprops = new Object();_root.city4_mc._accprops.name = “Home";Accessibility.updateProperties();
2005 Adobe Systems Incorporated. All Rights Reserved.18
Key Concepts: Label
Provide text equivalents for images and graphics in Flex Provide text equivalents that reflect the function of the image,
not one that merely describes the image. Use Flex’s tooltip property to provide text alternatives for
images and buttons with icons.
<mx:Image id="img1" visible="true" source="author.jpg" toolTip="Tool Tip for Image"/> <mx:Image id="img1" visible="true" source="author.jpg" toolTip="Tool Tip for Image"/>
2005 Adobe Systems Incorporated. All Rights Reserved.19
Key Concepts: Role
Screen reader user should know what every control does Buttons correctly identified
Controls emulating standard windows controls should be identified
Unusual controls should provide cues to users as to their identification, operation and state information
2005 Adobe Systems Incorporated. All Rights Reserved.20
Key Concepts: State
Every control should indicate:
Current focus and selection
Number of possible selections
Update when selection changes
Update info as state changes
Use Accessible Flash components for complex controls.
Accessible Flash or Flex components include MSAA support to dynamically deliver this content.
2005 Adobe Systems Incorporated. All Rights Reserved.21
Role and State in Flash Controls
Flash 8 components and Flex components provide support for role and state information automatically.
W3C group working on this issue for DHTML
http://www.w3.org/TR/aria-roadmap/
IBM recently released IAccessible2 with support for this roadmap
2005 Adobe Systems Incorporated. All Rights Reserved.22
Flash Controls
12 Accessible Flash components
Button Check Box Radio Button Label
Combo Box
List Box
Window
Alert
Data Grid
Text
TextArea
TextInput
2005 Adobe Systems Incorporated. All Rights Reserved.23
26 Accessible Flex 2 Components
Accordion
Alert
Button
CheckBox
ComboBox
DataGrid
DateChooser
DateField
Form
Image
Label
LinkButton
List
Flex Controls
Menu
MenuBar
Panel
RadioButton
RadioButtonGroup
TabNavigator
Text
TextArea
TextInput
TitleWindow
ToolTipManager
Tree
Validator
2005 Adobe Systems Incorporated. All Rights Reserved.24
Accessible JavaScript Components
IBM is checking accessibility fixes into the Dojo (http://www.dojotoolkit.org) library
Yahoo! has also focused attention on accessibility in its YUI library.
There are many JavaScript libraries
Adobe provides the Spry framework (http://labs.adobe.com/technologies/spry/)
Accessibility requires a large investment, so not all frameworks will provide full accessibility – WAI-ARIA work will reduce the investment some.
2005 Adobe Systems Incorporated. All Rights Reserved.25
Accessible JavaScript Components
Today, the “accessible” experience for AJAX applications is often defined as the “no JavaScript” experience
Unfortunately, most screen readers read js-created content
Full keyboard access depends on scripting today - JavaScript can add accessibility for many users.
2005 Adobe Systems Incorporated. All Rights Reserved.26
Key Concepts: Structure
Related controls should be read as a group
Make sure buttons from navigation are not mixed in with text
Ensure buttons in different columns or rows are read together
Ensure that elements that are obscured or off-stage are not read.
2005 Adobe Systems Incorporated. All Rights Reserved.27
Key Concepts: Structure
There are two methods for controlling the reading order of content
Control using position
Control using tabIndex
2005 Adobe Systems Incorporated. All Rights Reserved.28
Key Concepts: Structure
Control using position
Positive Example:
WGBH – Zoot Suit Riots www.pbs.org/wgbh/amex/zoot/eng_sfeature/mx/pop_zoot_mx.html
A simple example the controls the reading order using position on screen
Notice that the order of the navigation is a bit mixed up
Navigation is separated from content by screens to prevent confusing structure
Use .silent to hide elements when necessary
2005 Adobe Systems Incorporated. All Rights Reserved.29
Key Concepts: Structure
Control using tabIndex
If necessary, control reading order using the tabIndex property
In Player 8 and newer, any object omitted from the tab order will be last in the reading order
In Player 7 and older, omitting an object results in the default tab order defined by the player being used to create the MSAA order.
The tab order without a screen reader will honor an incomplete tabIndex listing
Code sample<mx:CheckBox label="First" tabIndex="2"/> <mx:CheckBox label="Second" tabIndex="1"/> <mx:TextInput tabIndex="3"/> <mx:Button label="Third" tabIndex="4"/>
<mx:CheckBox label="First" tabIndex="2"/> <mx:CheckBox label="Second" tabIndex="1"/> <mx:TextInput tabIndex="3"/> <mx:Button label="Third" tabIndex="4"/>
2005 Adobe Systems Incorporated. All Rights Reserved.30
Key Concepts: Recap
Label What is this thing?
Role What does this thing do?
State Is this thing on or off?
Structure How does this thing relate to
the rest of the things on the screen?
2005 Adobe Systems Incorporated. All Rights Reserved.31
Resources
Adobe Links
Adobe Accessibility Resource Centeradobe.com/accessibility
Flash Accessibility Best Practicesadobe.com/resources/accessibility/best_practices/bp_fp.html
DHTML Links
http://developer.mozilla.org/en/docs/Key-navigable_custom_DHTML_widgets
http://www.mozilla.org/access/dhtml/class/tabpanel
http://www.mozilla.org/access/dhtml/class/tree