Accessibility for Rich Internet Applications
Presenter: Andrew Kirkpatrick
The text alternative to a PowerPoint presentation delivered by Andrew Kirkpatrick, Corporate Accessibility Engineering Lead at Adobe Systems Incorporated, at the February 21, 2007, meeting of Boston-IA.
Quick Links:
Slide 1:
Accessibility for Rich Internet Applications
Andrew Kirkpatrick,
Corporate Accessibility Engineering Lead,
Adobe Systems
Slide 2:
What Are Rich Internet Applications? (1)
- Web applications that have functionality comparable to that of traditional desktop applications.
Common technologies:
- Adobe® Flash® / Adobe® Flex™
- XHTML/CSS/JS (often with AJAX)
- Java
Slide 3:
What Are Rich Internet Applications? (2)
Examples
[Examples require the Adobe Flash Plug-in.]
Slide 4:
What is Flex?
Slide 5:
Flex: FlexStore
[Example of a shopping application developed in Flex.]
Back to Index
Slide 6:
Flex: PhotoViewer
[Example of a photo viewer application developed in Flex.]
Slide 7:
Flex: Blog Reader
[Example of a blog reader application developed in Flex.]
Slide 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.
Slide 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.
Slide 10:
Accessible Flash
Best practices for creating accessible Flash and Flex applications.
[Image of the Flash Professional 8 packaging.]
Back to Index
Slide 11:
Screen Reader Requirements
JAWS for Windows
Flash Components Scripts
Other Assistive Technologies
- Window-Eyes, IBM HomePage Reader, HAL/SuperNova, ZoomText, PC-Talker (Japanese), and JAWS-J also interoperate with Flash and Flex content.
Slide 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 at regular intervals.
- Test for screen reader access at least twice 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.
Slide 13:
Key Concepts
- Label
- Role
- State
- Structure
- How does this thing relate to the rest of the things on the screen?
Flex simplifies all of these
Slide 14:
Key Concepts: Label (1)
- Every control should have an associated label.
- Label should describe function.
- If function changes, so should label.
Slide 15:
Key Concepts: Label (2)
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.
[Image of the Accessibility panel.]
Back to Index
Slide 16:
Key Concepts: Label (3)
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.
[Image of the Accessibility panel with a .name property specified.]
Slide 17:
Key Concepts: Label (4)
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();
Slide 18:
Key Concepts: Label (5)
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"/>
[Image with "Tool Tip for Image" shown in a tooltip.]
Slide 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.
Slide 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.
Back to Index
Slide 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
Slide 22:
Flash Controls
12 Accessible Flash Components
- Button
- Check Box
- Radio Button
- Label
- Combo Box
- List Box
- Window
- Alert
- Data Grid
- Text
- TextArea
- TextInput
Slide 23:
Flex Controls
26 Accessible Flex 2 Components
- Accordion
- Alert
- Button
- CheckBox
- ComboBox
- DataGrid
- DateChooser
- DateField
- Form
- Image
- Label
- LinkButton
- List
- Menu
- MenuBar
- Panel
- RadioButton
- RadioButtonGroup
- TabNavigator
- Text
- TextArea
- TextInput
- TitleWindow
- ToolTipManager
- Tree
- Validator
Slide 24:
Accessible JavaScript Components (1)
- 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.
Slide 25:
Accessible JavaScript Components (2)
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.
Back to Index
Slide 26:
Key Concepts: Structure (1)
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.
Slide 27:
Key Concepts: Structure (2)
There are two methods for controlling the reading order of content:
- Control using position
- Control using tabIndex
Slide 28:
Key Concepts: Structure (3)
Control using position
- Positive Example:
- WGBH - Zoot Suit Riots
www.pbs.org/wgbh/amex/zoot/eng_sfeature/pop_zoot.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.
Slide 29:
Key Concepts: Structure (4)
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"/>
Slide 30:
Key Concepts: Recap
- Label
- Role
- State
- Structure
- How does this thing relate to the rest of the things on the screen?
Back to Index
Slide 31:
Resources
Adobe Links
DHTML Links
Slide 32 (last slide):
Better by Adobe™
Back to Index
© 2005 Adobe Systems Incorporated. All rights reserved.
Back to top
