by AWK

 Comments (18)

Created

April 28, 2009

This post is subject to Adobe's Terms of Use.

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

  • By Olivier - 6:08 AM on April 29, 2009  

    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.

  • By Livio - 6:26 AM on April 29, 2009  

    Tk Andrew. Example have some rendering problem in Firefox, but work!

  • By Tom H - 9:42 AM on April 29, 2009  

    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.

  • By Michael Jordan - 11:22 AM on April 29, 2009  

    @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

  • By Andrew Kirkpatrick - 11:32 AM on April 29, 2009  

    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.

  • By Martin Kliehm - 4:55 AM on May 4, 2009  

    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.

  • By Michael Jordan - 5:26 PM on May 8, 2009  

    @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/

  • By Michael Jordan - 5:28 PM on May 8, 2009  

    @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/

  • By Zarate - 4:12 AM on May 22, 2009  

    I there,
    Not working for me, I’m afraid :(
    I’m running FF 3.0.10, FP 10,0,12,36 on Linux (Ubuntu).

  • By air jordan shoes - 2:28 AM on May 25, 2009  

    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.

  • By Adrian - 6:08 AM on June 24, 2009  

    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.

  • By Jon Modell - 7:47 AM on July 17, 2009  

    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?

  • By Ken Petri - 3:44 PM on August 3, 2009  

    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.

  • By Steven - 11:30 AM on August 18, 2009  

    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.

  • By Tasin - 5:44 PM on September 24, 2009  

    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.

  • By Steven - 10:06 AM on May 24, 2010  

    Has there been any development with this?
    The Demonstration test file with HTML links does not work with Safari on Mac, and I’m having a nightmare getting it to work with the swfobject() function.

  • By Steven - 10:34 AM on May 24, 2010  

    Being that Safari’s default tab behaviour is just as bad with html, I am simply giving up on the browser.
    As for getting the swfobject() function to work, I simply needed to include swfobject before swfobject_2_1 – I mistakingly assumed the included js file was a version of the swfobject core itself.
    Much happier now.

  • By Steven - 9:04 AM on June 4, 2010  

    Tabbing into Flash also doesn’t work in Google Chrome.