Re: Fruit basket app in Adobe Flex/Flash

  • From: Don Marang <donald.marang@xxxxxxxxx>
  • To: programmingblind@xxxxxxxxxxxxx
  • Date: Wed, 20 Apr 2011 18:53:15 -0400

I initially tested it with JAWS 12 and IE 8 on Windows 7. Everything works as expected, except JAWS only announces the Fruit edit boxup until the time I add the first fruit. Then it just says it is a graphic. I turn off auto forms mode in general. As I move to the fruit graphic with the Tab or arrow key, Jaws does not inform me that it has entered forms mode. However, I can enter text and hit enter to add a fruit. Typing the text, then hitting Tab to get to the "Add" button also works. JAWS just forgets what type of control this is. Is the fruit control have multiple levels. In other words are the label and the edit box grouped together as one control? I think Flash has the capability to hide or show accessibility info for each level. This is so you can hide layout info on certain levels if desired. Perhaps the edit box control needs to be set to show. Adobe does not always set the logical option by default.


JAWS 11 worked the same as JAWS 12 for me on both browsers.

NVDA worked as you said, where you press Enter to interact with the object in IE 8. It may be my unfamiliarity with NVDA, but it seemed a little quirky. For instance, at one point it placed the fruit edit box without the label between the "Add" button and the list.

I have Firefox 3.6.1 in Windows and Firefox 3.6.15 in Vinux 3.0.1 (based on Ubuntu 10.0.4 Lucid). On Windows and Vinux, the Flash object is completely invisible to all screen readers (JAWS 11, JAWS 12, NVDA 2011-1, and orca2.30). It simply reads the text before and after the Flash object as one line!

Just curious, is it possible to have access keys assigned to the controls, like other languages? I realize the obvious access keys, such as Alt + for Add and Alt + d for delete are not available in IE 8.

*Don Marang*
Vinux Software Development Coordinator - vinuxproject.org <http://www.vinuxproject.org/> There is just so much stuff in the world that, to me, is devoid of any real substance, value, and content that I just try to make sure that I am working on things that matter.
-- Dean Kamen

On 4/20/2011 11:43 AM, Jamal Mazrui wrote:
Hi Don,
I am curious what screen reader and browser versions you have tried with the demo. What happens with Orca and Firefox? Also, Can anyone report on results with VoiceOver and Safari?

I found the best results with the latest JAWS and NVDA. JAWS 12 includes the Flex controls within the web page in virtual mode, whereas JAWS 10 (have not tried 11 yet), requires turning off the virtual cursor in order to notice anything between the "Flash Start" and "Flash End" statements on the page. NVDA indicates there is an "embedded object" -- pressing Enter opens it.

I think the input box for entering a fruit name probably did not disappear, but at least with a JAWS version less than 12, the "Fruit" label is not spoken consistently. I do not know why. I also noticed a problem of having to tab several times with JAWS 10 before arriving at the input box, even though the code tries to set focus to it initially.

I want to compare the accessibility of this fruit basket with the couple of Silverlight ones that others from this list have recently contributed to FruitBasketDemos.org. Let's keep the discussion going. I am going to give feedback directly to Adobe's accessibility group as well.

According to the Adobe web site, Flex apps can be built to run on iOS and Android as well, so this is potentially a cross-platform way of developing apps with essentially the same code.

Jamal

 On Wed, 20 Apr 2011, Don Marang wrote:

Date: Wed, 20 Apr 2011 10:08:06 -0400
From: Don Marang <donald.marang@xxxxxxxxx>
Reply-To: programmingblind@xxxxxxxxxxxxx
To: programmingblind@xxxxxxxxxxxxx
Subject: Re: Fruit basket app in Adobe Flex/Flash

Great work!  This could be very useful.

What are the remaining issues with the demo? I only noticed two issues. after entering the first fruit, it was added to the list, then the edit box disappeared. Second at the "bottom" of the Flash object there is an unlabeled graphic. It only says "graphic 9" before adding any fruit and "graphic 10" after.


*Don Marang*
Vinux Software Development Coordinator - vinuxproject.org <http://www.vinuxproject.org/> There is just so much stuff in the world that, to me, is devoid of any real substance, value, and content that I just try to make sure that I am working on things that matter.
-- Dean Kamen

On 4/20/2011 8:40 AM, Jamal Mazrui wrote:
From the archive
http://EmpowermentZone.com/flex_fruit.zip

This fruit basket program is developed with the Adobe Flex 4 framework. It uses Flash Player as a virtual machine to run code compiled from one of two languages: ActionScript -- similar to JavaScript -- or MXML -- a declarative markup language. The compiled code, FruitBasket.swf, is hosted in a web page, FruitBasket.htm, which serves as a wrapper for the app. Flash Player 10 is required on the client computer. Supported web browsers are Internet Explorer and Firefox.

The free Flex 4 SDK is available in a zip archive from
http://OpenSource.adobe.com

It includes a command-line compiler, mxmlc.exe. There are two versions of the source code: FruitBasket.mxml and FruitBasket.as, using the MXML approach and the ActionScript approach, respectively. The batch files BuildMXML.bat and BuildAS.bat compile these files, creating FruitBasket.swf (the extension stands for ShockWave Flash) in either case.

Please note, however, that although FruitBasket.as compiles, the code evidently still needs some tweaking because the app does not work properly. The code is left in this distribution in case others may learn from it and take it furhter.

This app tries to follow best practices in developing accessible Flex apps, as explained at
http://adobe.com/accessibility

A collection of text tutorials about Flex development -- saved from public web pages -- is available at
http://EmpowermentZone.com/flex_doc.zip

Screen readers vary significantly in their client-side support for Flex accessibility, which is based on MSAA. It may be necessary to manually turn off a virtual or browse mode in order to interact with the app. To try it, open the embedding HTML file, either locally after unzipping the archive, or via the following web address:
http://EmpowermentZone.com/FruitBasket.htm

The archive will soon be available on
http://FruitBasketDemos.org

For convenient reference, the FruitBasket.mxml code is also pasted below.

Jamal Mazrui

<?xml version="1.0" encoding="utf-8"?>
<!-- Public domain fruit basket program in MXML
By Jamal Mazrui on April 20, 2011 -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth = "955" minHeight = "600" creationComplete = "initApp()">

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<!-- Place UI components here -->
<s:HGroup id = "hgrpAdd" accessibilityEnabled = "true">
<s:Label id = "lblFruit" accessibilityEnabled = "false" text = "Fruit:" tabEnabled = "false"/> <s:TextInput id = "txtFruit" accessibilityEnabled = "true" accessibilityName = "Fruit:" tabIndex = "1"/> <s:Button id = "btnAdd" accessibilityEnabled = "true" label = "Add" tabIndex = "2" click = "addFruit();"/>
</s:HGroup>

<s:HGroup id = "hgrpDelete" accessibilityEnabled = "true">
<s:Label id = "lblBasket" accessibilityEnabled = "false" text = "Basket:" tabEnabled = "false"/> <s:List id = "lstBasket" accessibilityEnabled = "true" accessibilityName = "Basket:" tabIndex = "3">
<s:dataProvider>
<mx:ArrayList>
</mx:ArrayList>
</s:dataProvider>
</s:List>

<s:Button id = "btnDelete" accessibilityEnabled = "true" label = "Delete" tabIndex = "4" click = "deleteFruit();"/>
</s:HGroup>

<!-- Place ActionScript event handlers here -->
<fx:Script>
<![CDATA[
import mx.controls.Alert;

private function initApp(): void {
if (Capabilities.hasAccessibility && !this.accessibilityProperties) {
this.accessibilityProperties = new AccessibilityProperties();
this.accessibilityProperties.silent = false;
this.accessibilityProperties.forceSimple = false;
Accessibility.updateProperties();
}

this.defaultButton = btnAdd;
txtFruit.setFocus();
} // initApp method

private function addFruit():void {
var sFruit: String = txtFruit.text;
var iLength: int = sFruit.length;
if (iLength == 0) Alert.show("No fruit to add!", "Alert");
else {
lstBasket.dataProvider.addItem(sFruit);
var iIndex: int = lstBasket.dataProvider.length - 1;
lstBasket.selectedIndex = iIndex;
txtFruit.text = "";
}
} // addFruit method

private function deleteFruit(): void {
var iIndex: int = lstBasket.selectedIndex;
if (iIndex == -1) Alert.show("No fruit to delete!", "Alert");
else {
lstBasket.dataProvider.removeItemAt(iIndex);
var iLength:int = lstBasket.dataProvider.length;
if (iIndex == iLength) iIndex --;
if (iIndex >=0) lstBasket.selectedIndex = iIndex;
}
} // deleteFruit method
]]>
</fx:Script>
</s:Application>
__________
View the list's information and change your settings at //www.freelists.org/list/programmingblind


__________
View the list's information and change your settings at //www.freelists.org/list/programmingblind

Other related posts: