WebAIM - Web Accessibility In Mind

E-mail List Archives

Flex 4 and reading order

for

From: Travis Roth
Date: Mar 31, 2010 1:09PM

Hello,

Some time back there was a discussion on this list about making accessible
Flex. A brief example was given.
I have updated this example to compile using the Flex 4 SDK.
When viewing this using JAWS 11 and IE7 with Flash player 10, the reading
order is not as I would expect. Instead of the description text field
appearing first as the tabIndex suggests, it appears last the same as the
code order.
Code snippet:

<mx:Panel title="Shopping cart 1">
<mx:Label text="Coffee Blends" tabIndex="2" />
<mx:ComboBox id="coffeeCombo" dataProvider="{coffeeArray}"
tabIndex="3" rowCount="2" >
</mx:ComboBox>
<mx:Text text="Description: {coffeeCombo.selectedItem.data}"
tabIndex="1" />
</mx:Panel>

What is going wrong? I'm sure it's a trivial error but I'm not seeing it.

The code being compiled in entirety is below.
Thanks.

<?xml version="1.0"?>
<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"
creationComplete="accessible_init()">
<fx:Script>
<![CDATA[
var o1:Object = {label:"Red Sea", data:"Smooth and fragrant"};
var o2:Object = {label:"Andes", data:"Rich and pungent"};
var o3:Object = {label:"Blue mountain", data:"Delicate and refined"};
[Bindable]
public var coffeeArray:Array = new Array(o1, o2, o3);

function accessible_init():void
{
coffeeCombo.accessibilityProperties = new AccessibilityProperties();
coffeeCombo.accessibilityProperties.name = "coffee choice";
Accessibility.updateProperties();
}
]]>
</fx:Script>

<mx:Panel title="Shopping cart 1">
<mx:Label text="Coffee Blends" tabIndex="2" />
<mx:ComboBox id="coffeeCombo" dataProvider="{coffeeArray}"
tabIndex="3" rowCount="2" >
</mx:ComboBox>
<mx:Text text="Description: {coffeeCombo.selectedItem.data}"
tabIndex="1" />
</mx:Panel>

</s:Application>