Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to get a screen reader to read out an itemRenderer components
    text
    copied!<p>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.</p> <p>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.</p> <pre><code>&lt;?xml version="1.0"?&gt; &lt;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.*"&gt; &lt;fx:Script&gt;&lt;![CDATA[ private function listLabelFunction(item : Object) : String { return item.one; } ]]&gt;&lt;/fx:Script&gt; &lt;s:VGroup&gt; &lt;access:Label id="labelOne" text="This text will be read out!"/&gt; &lt;s:List hasFocusableChildren="true" labelFunction="listLabelFunction"&gt; &lt;s:itemRenderer&gt; &lt;fx:Component&gt; &lt;s:ItemRenderer&gt; &lt;fx:Script&gt;&lt;![CDATA[ import mx.controls.Alert; ]]&gt;&lt;/fx:Script&gt; &lt;s:HGroup id="hGroup"&gt; &lt;access:Label id="labelDisplay" text="{data.one}"/&gt; &lt;access:Label id="labelTwo" text="{data.two}"/&gt; &lt;s:Button id="button" label="{data.button}" click="Alert.show('Ok!')"/&gt; &lt;/s:HGroup&gt; &lt;/s:ItemRenderer&gt; &lt;/fx:Component&gt; &lt;/s:itemRenderer&gt; &lt;s:dataProvider&gt; &lt;mx:ArrayCollection&gt; &lt;fx:Object one="one" two="two" button="ok"/&gt; &lt;fx:Object one="une" two="deux" button="ok"/&gt; &lt;fx:Object one="uno" two="due" button="ok"/&gt; &lt;fx:Object one="um" two="dois" button="ok"/&gt; &lt;/mx:ArrayCollection&gt; &lt;/s:dataProvider&gt; &lt;/s:List&gt; &lt;/s:VGroup&gt; &lt;/s:Application&gt; </code></pre> <p>"access label"; ensures the label is read out and is in the tab order.</p> <pre><code>package accessibility { import mx.managers.IFocusManagerComponent; import spark.components.Label; public class Label extends spark.components.Label implements IFocusManagerComponent { } } </code></pre> <p>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.</p> <p>Is it possible to get each label and button read out?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload