During the last 360|Flex at San Jose I have had the opportunity to talk about Flex and Accessibility. One of the samples I worked on is the exposure of the information stored inside the Organization Chart  to the screen reader.

The experience was amazing for me because the ILOG elixir charts source code is well written and arranged in a good way, that’s the reason why the process to make the information accessible to the screen reader was so easy and quick.

At the end of this entry you can find the slides and the link to the ILOG elixir accessible demo (source view enabled) and here you can find a preview of the new accessibility Flex documentation.

In the  Organization Chart component I did a lot of changes…

Basically what I did is to make the component aware of TAB navigation, this means that when it get the focus it forces the player to navigate through the TAB the items rendered inside it

override public function setFocus():void{

super.setFocus();

// Diable the other component in order to keep here the focus
// -> better implementation is required!
this.dispatchEvent(new HandleTabEnabled(false, this));

// Get the first item selected in the chart
var ir:IListItemRenderer = _container.getChildAt(2) as IListItemRenderer;
var data:Object = getWrappedData(ir.data);

// Force the selection of the first item
dispatchChangeEvent(data, ir, new MouseEvent(MouseEvent.CLICK));

// Update the information stored for the screen reader
if((this.getItemRenderer(data) as AccessibleChartRenderer)){

if(Accessibility.active){

this.accessibilityProperties.name = (this.getItemRenderer(data)
as AccessibleChartRenderer).accessibilityProperties.name;
this.accessibilityProperties.description =
(this.getItemRenderer(data) as
AccessibleChartRenderer).accessibilityProperties.description;
flash.accessibility.Accessibility.updateProperties();

}

}

The method disable the other component in order to keep here the focus, get the first item selected in the chart and update the information stored for the screen reader.

In order to handle the TAB enabling I created a custom event with which I set enabled or disabled the tabEnabled property on all the componensts but not on the one that get the focus

// Code needs to be optimized for a real production
private function onHandlingTab(e:HandleTabEnabled):void{

for(var i:int = 0; i < this.parentApplication.numChildren; i++){

if(this.parentApplication.getChildAt(i) is IFocusManagerComponent){

(this.parentApplication.getChildAt(i) as UIComponent).tabEnabled
= e.isEnabled;

}

}

}

Another small change I did is in the keyEventHandler method that now is able to get the TAB key pressure and move to the next item updating the information stored inside MSAA

// Move down the focus
moveFocus("down");

// Update the screen reader informations
if(this.getItemRenderer(actualItemData) as AccessibleChartRenderer){

if(Accessibility.active){

this.accessibilityProperties.name = (this.getItemRenderer(actualItemData) as
AccessibleChartRenderer).accessibilityProperties.name;
this.accessibilityProperties.description = (this.getItemRenderer(actualItemData) as
AccessibleChartRenderer).accessibilityProperties.description;

Accessibility.updateProperties();

}

}

break;

For future implementations I added to the ItemRendererCache class the capability to define the tabIndex property of each component rendered inside the all ILOG elixir framework.
A greater testing and research may bring us to more advanced solutions for the accessibility enhancement of these components (i.e. focus handling).

Here you can find the demo and here the slides, a good question I received during the conference was about the possibility to ask to impaired user to disable the screen reader and put into the Flash Player the captions, the audio content, etc. I’m pretty sure that is a good point to discuss also if it’s not a standard way…