Firefox Focus and Actual Links
I mentioned at the TPG Webinar on Flash that there is a way around the issues with focus trapping in Firefox. My friend and accessibility-colleague Michael Jordan has developed a simple example that shows how to get focus in and out of Flash content in Firefox (using the SWFFocus class). Also in this example he shows how to make links that are not buttons, but use the MSAA link role. This has always been possible, but usually people use the button role.
Give this a try and let us know if it works for you or if you have any suggestions for improvements.
Demonstration test file
Demonstration test file, with HTML links also (added 8/18/2009)
Download demonstration file
Comments
Hi,
I just downloaded the zip and opened the index.html into my browser directly from my local disk (not through a web server, that is). The Flash object is oddly displayed in Firefox (v3.0.9, with the Flash plugin labelled version 10.0 r12). All the links are set in the top left corner of the page, overlapping each other. They can be tabbed through, but it does not seem fit for showing around. That's a shame since I was about to pass the news from my blog!
In IE6 it works fine though (but is of little interest to me since my main concern currently is the focus-trapping issue in FF). The plugin information given indicates that it's Flash 10 as well (Flash10a.ocx).
Thanks in advance for this.
Posted by: Olivier | April 29, 2009 6:08 AM
Tk Andrew. Example have some rendering problem in Firefox, but work!
Posted by: Livio | April 29, 2009 6:26 AM
Wow... I've been looking for a solution for this for years. I've always resorted to creating my controls in HTML outside of Flash.
Posted by: Tom H | April 29, 2009 9:42 AM
@Olivier
The ActionScript on Frame 1 of the AccLinkExample.fla first creates the AccLinkButton instances on the stage. Then, it initializes SWFFocus by calling SWFFocus.init(stage). Finally, it positions the links by calling onResize().
The SWFFocus class uses ExternalInterface to call JavaScript, which writes the links and a script tag to the DOM in index.html.
When testing locally and not on a web server, you must explicitly allow the directory that contains index.html using the Global Security Settings Panel at http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html or the FlashPlayer will catch a security-sandbox violation error when it tries to make the ExternalInterface call.
Since the onResize() method is being called after the SWFFocus.init(stage) call and security-sandbox violation, the links never get repositioned.
Cheers,
Michael
Posted by: Michael Jordan | April 29, 2009 11:22 AM
Thanks Michael. I also posted the example live in case people want to try it without changing their settings to allow scripting locally. I added a link to the blog post above.
Posted by: Andrew Kirkpatrick | April 29, 2009 11:32 AM
Tabbing forward and backwards (SHIFT-Tab) seems to confuse some internal marker. If I tab into the Flash, go through it, return backwards, go through it, and enter it again, the last link is underlined. So the tab order is forward: 1, 2, 3, out, backward: 3, 2, 1, out, forward: 3. I guess this is a bug.
Posted by: Martin Kliehm | May 4, 2009 4:55 AM
@Martin Kliehm
I made a small change in the SWFFocus class that ignores the first focus change after the Flash movie is activated.
http://www.majordan.net/AccLinkExample/
Posted by: Michael Jordan | May 8, 2009 5:26 PM
@Martin Kliehm
I made a small change in the SWFFocus class that ignores the first focus change after the Flash movie is activated.
http://www.majordan.net/AccLinkExample/
Posted by: Michael Jordan | May 8, 2009 5:28 PM
I there,
Not working for me, I'm afraid :(
I'm running FF 3.0.10, FP 10,0,12,36 on Linux (Ubuntu).
Posted by: Zarate | May 22, 2009 4:12 AM
I also posted the example live in case people want to try it without changing their settings to allow scripting locally. I added a link to the blog post above.
Posted by: air jordan shoes | May 25, 2009 2:28 AM
This worked great for me in FF and IE - I think this method should be far more widely publicised. It took me ages to find it but it's so simple!
However (why is there always a "however"?), in Chrome and Safari it traps keyboard focus in the Flash movie and you can't tab out of it. I can live without that, but with Safari steadily increasing in use, it would be good to have a fix for that too.
By the way, I think it would be helpful for the sake of clarity (or perhaps for the sake of simpletons like me) to separate the two methods contained in this example - tabbing into and out of movies is one, and using the MSAA link role is another - it took me a while to filter out the MSAA stuff and to realise that all you needed to do to fix the tabbing-into-and-out-of-Firefox issue was add the com.modernista directory to the .fla's directory and add the two SWFFocus lines of Actionscript.
Posted by: Adrian | June 24, 2009 6:08 AM
Having a workaround for the Firefox / Flash Player issue is great. Where I work 508 compliance is mandatory and the fact that there are many blind Firefox users makes all Flex's accessible features moot for us. I have tried using SWFFocus in Flex when the application initializes, but It does not seem to work. Any advice?
Posted by: Jon Modell | July 17, 2009 7:47 AM
Two problems I'm having: First, when the page is loaded or refreshed, Firefox 3.5 seems to "get stuck"--all of my typical key presses get gobbled up. I can't tab, shift-tab, or alt + anything. If I physically click a browser control or physically put the focus into the search or location field via the mouse, then I can move around. Second, if I add to the test page regular hyperlinks (I added one above the movie div and one below it) I notice that the page tab order is messed up: the page focuses, the movie focuses (and I tab through the links in the movie), the page (or a void of some sort) focuses, the link above the movie focuses, and then the one below it focuses, as I tab through. The movie is getting page tab-order priority, apparently.
Posted by: Ken Petri | August 3, 2009 3:44 PM
For anyone experiencing formatting issues when downloading the example, be sure that you test it using a local server rather than dragging the index file into the browser. Flash security mangles the example otherwise.
Posted by: Steven | August 18, 2009 11:30 AM
Hi,
Is it possible to get a version of this module that is compatible with AS 2.0 rather than 3.0? That would be a great help to make all previous flash apps accessible.
Posted by: Tasin | September 24, 2009 5:44 PM