During the last days I’ve been testing accessibility issues in Flex. Screen readers (SR) in particular. The most common SRs in Norway are JAWS, SuperNova, WindowEyes og Blindows. Out of these only JAWS and WindowEyes have Flash Player support. Most of my testing has been with JAWS, which is the most common SR in Norway and the SR with best Flex compability.

Following is a compilation of procedures, findings and experiences from my tests. No conclusions are reached yet. I’ll leave those to a later post.

Setup

1. Download and install JAWS 7.0.
   JAWS is currently available in version 9.0, but the JAWS scripts for Flex are only supporting version 6.0 and 7.0.
2. Download and install JAWS scripts for Flex (1.5 or 2.0)
3. Enable accessibility in your Flex compiler:
   Edit the flex-config.xml file so that the <accessible> attribute is set to true:
<mxml-compiler>
...
<accessible>true</accessible>
...
</mxml-compiler>
This file is usually located in:
   C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\flex-config.xml

Coding

Flex-components have built-in support for SRs, but the help text is often not very descriptive, and some components (eg. checkboxes and radiobuttons) aren’t read at all. Therefore it’s more safe to prepare every interactive component with a descriptive name for the SR to read.

Following is a function to ease the addition of accessibility text to components:

private function addAccessibility(comp:UIComponent, name:String):void {
comp.accessibilityProperties = new AccessibilityProperties();
comp.accessibilityProperties.name = name;
comp.accessibilityProperties.forceSimple = true;
comp.accessibilityProperties.noAutoLabeling = true;
}

To make forms best suited for accessibility, use mx:Form for the entire form and mx:FormItems for every input component:

<mx:Form>
<mx:FormItem label="First Name">
<mx:TextInput id="txtFirstname" />
</mx:FormItem>
...
</mx:Form>

Usage

Compile your movie and display it in IE with JAWS running in the background. Even if JAWS supports both IE 6.0, IE 7.0, Firefox 2.0 and Netscape® Communicator 4.5, JAWS+Flex/Flash only works in IE. The accessibility technology in Flash Player is built upon Microsoft Active Accessibility (MSAA) which is only available to JAWS from IE.

When the flash movie has loaded, JAWS will start reading through all of the content from start to end. Activate Forms Mode in JAWS by hitting NUM PAD SLASH or ENTER. You can now press TAB to select a button or an input field, JAWS will first try to read the accessibility text associated to the current element. If no such text exists, only the default text is read, describing the label and the type of element.

Issues

• Even if Flex’s components are made accessible, there’s a lot of known issues related to SRs. These problems comes from the SR implementation, not Flex.
• SRs don’t know when content in your movie has changed (new popups, windows, pages, etc), and there’s no way to tell them.
• Bug: You can’t use form headings <mx:FormHeading label="x"/> for forms. These will erroneously get read as the label to the following input component.
• Like stated before, accessibility in Flex is limited to some very strict conditions:
  • OS: MS Windows
  • Browser: Internet Explorer
  • Sreen Reader: JAWS version 7.0

Further Reading

Adobe: Flex Accessibility
WebAIM: Creating Accessible Macromedia Flash Content

Example applications from Adobe:
Blog Reader
Explorer