Question

In an accessible flex app, the user can navigate through the control by using the TAB key.

The flex app pops up on top of the html page aftert the user activate a particular link, and is loaded using swfobject.embedSWF.

It works well in most cases, but there are some instances where either or both these happen:

a) The flex app loads ok, the “flex focus” is set on the intro text label to read out loud, but pressing tab seems to still cycle through the links on the page behind. (Now Fixed, see Edit 2)

b) The focus worked well and pressing tab cycle through the controls ok, but after going through them it then tabs out of the flex app and onto the address bar.. it becomes a nightmare to even try to get back to the flex app without clicking on it.. which isn’t exactly accessibility friendly.

Is there any way to prevent these from happening?

EDIT: The target browser is IE. Seems to be the most used with Jaws

EDIT: I managed to fix problem (a). The trick was to call focus on the swf object, but after a slight time out – must be something to do with flash/js ready state.

setTimeout(function(){
   document.getElementById('swfobject').focus()
},25);

Problem (b) is still an issue though…

Answer 1

In your mx:Application component, add an event listener for the keyFocusChange and add this code :

protected function application1_keyFocusChangeHandler(event:FocusEvent):void
{
    event.preventDefault();
    focusManager.getNextFocusManagerComponent(event.shiftKey).setFocus();
}