How to get a screen reader to read out an itemRenderer components

Question

We are adapting our intranet web application to be WCAG 2.0 compliant. The app features a list of complex controls, but i am unable to get a screen read to read anything in the list but the labelDisplay or whats is returned by the labelFunction of the list.

below is a boiled down example, "labelOne" is read by the screen reader and the listBox, and the result of the labelFunction for each item in the list.

<?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"
        xmlns:access="accessibility.*">
    <fx:Script><![CDATA[
        private function listLabelFunction(item : Object) : String {
            return item.one;
        }
        ]]></fx:Script>
    <s:VGroup>
        <access:Label id="labelOne" text="This text will be read out!"/>

        <s:List hasFocusableChildren="true" labelFunction="listLabelFunction">
            <s:itemRenderer>
                <fx:Component>
                    <s:ItemRenderer>
                        <fx:Script><![CDATA[
                            import mx.controls.Alert;
                            ]]></fx:Script>
                        <s:HGroup id="hGroup">
                            <access:Label id="labelDisplay" text="{data.one}"/>
                            <access:Label id="labelTwo" text="{data.two}"/>
                            <s:Button id="button" label="{data.button}" click="Alert.show('Ok!')"/>
                        </s:HGroup>
                    </s:ItemRenderer>
                </fx:Component>
            </s:itemRenderer>
            <s:dataProvider>
                <mx:ArrayCollection>
                    <fx:Object one="one" two="two" button="ok"/>
                    <fx:Object one="une" two="deux" button="ok"/>
                    <fx:Object one="uno" two="due" button="ok"/>
                    <fx:Object one="um" two="dois" button="ok"/>
                </mx:ArrayCollection>
            </s:dataProvider>
        </s:List>
    </s:VGroup>
</s:Application>

"access label"; ensures the label is read out and is in the tab order.

package accessibility {
import mx.managers.IFocusManagerComponent;

import spark.components.Label;

public class Label extends spark.components.Label implements IFocusManagerComponent {
}
}

I am able to tab too each item in the list, ie "labelDisplay", "labelTwo" and "button", but the screen reader does not read them out.

Is it possible to get each label and button read out?

Answer 1

I have a couple of suggestions, but I don't know if they will work or not (my screen reader is at the cleaners).

First, you might find some interesting reading here from the ListAccImpl class about how the List class works with screen readers. In particular, note this sentence in the section about child objects (renderers):

... the accessibility of the list items is managed by the List; the accessibilityImplementation and accessibilityProperties of the item renderers are ignored by the Flash Player.

This explains why the screen reader only reads out the value of labelDisplay or the return of the labelFunction. Even though you've focused an object in the renderer, it appears that the List is still in control w/respect to the screen reader. This is further confirmed in the docs for the AccImpl class (also from the children section):

The Flash Player does not support a true hierarchy of accessible objects. If a DisplayObject has an accessibilityImplementation object, then the accessibilityImplementation objects of its children are ignored.

Suggestions

• Try setting the focusEnabled property of the List to false. When you tab through the UI, the objects in the renderers will still get focused, but the List itself will not. As the docs for AccImpl seem to imply, the List therefore won't manage interaction w/the screen reader, and it will be deferred to the focusable objects in the renderer.

• Try extending the List class, and override it's initializeAccessibility() method. This method (I assume) is called by the Flex component life cycle, and is where the list gets the ability to interact w/the screen reader. If you don't initialize the accessibility implementation, my thinking is that it will then defer that responsibility to the objects in your renderer. Or it might crash and burn.

That's all I got, hope it helps... good question, please do share what you find.