/**

• Cross browser tabbing solution/engine for Flash projects - see http://discombo.co.uk/new/flashfocus/ for an example of this in action
• Released under MIT license:
• http://www.opensource.org/licenses/mit-license.php
• @author Richard England 2011 and Gamelab UK
• @see http://www.gamelabuk.com / http://www.richardengland.co.uk
• @version 0.1 */

The problem - see http://kb2.adobe.com/cps/155/tn_15586.html

A Flash movie embedded in an HTML page does not receive tabbing focus/key events when the page first loads in a web browser. The user therefore cannot tab into buttons and interactive elements.

Reason

In order for a Flash movie to capture key events, the movie itself must first be given focus from the browser. Web browsers do not automatically give keyboard focus to Flash movies, or any other embedded content.

The Solution

The code provided is a combination of AS3 and Javascript/JQuery. It will loop through all InteractiveObject and DisplayObjectContainer objects, checking to see if they have accessibility properties (tabIndex, accessibility name and description, etc). It will pass an array of these properties back to the page through ExternalInterface to JS functions, which will then build an "invisible" HTML form off the screen.

Each element of that HTML form will represent an InteractiveObject in Flash, and can be tabbed and entered, passing the relevant "MouseEvent.CLICK" event back to the Flash player. in effect this allows the user to appear to be seamlessly tabbing through fully accessible Flash content, and interactiing with it, when in fact they are actually interacting with a HTML form, with javascript focus and click events being passed back to the Flash object.

Instructions

Add the tabbing.js (also swfobject and jquery required) to your html:

Add the Flash object to your page

Add the following import to your Main constructor class:

import com.richardengland.utils.Tabbing;

Create the tabbing object in your initialisation code:

tabbing = new Tabbing(this);

If you want to refresh the tabbing list (which will build a new html form to reflect changes in the user interface):

tabbing.refreshTabbingList();

If you want to create a limited tabbing list (e.g. for a "popup" interface window in your GUI):

tabbing.createNewTabsFor( popupObject );

... and that's it!

Hope it helps someone...