Making Flash movies accessible in Firefox
I recently discovered (to my horror) that in Firefox, it’s impossible to focus on embedded Flash movies using only the keyboard (IE manages this fine) which is no good for making accessible content. I usually have nothing but praise for Firefox but Mozilla have really dropped the ball on this one. After a bit of online investigation and code tinkering I’ve come up with the following code (using the magic of JQuery) to fix this problem:
$(document).ready(function() {
$(“embed”).wrap(“<a href=’#’ class=’flashlink’></a>”);
$(“.flashlink”).focus(function() {
$(this).find(“embed”).focus();
return false;
});
$(document).keydown(function(event) {
if (event.keyCode == 27) $(document.activeElement).blur(); // Escape key pressed
}
});
All it does is wrap an anchor link around all Flash movies on the page and when that link is focused, it shifts focus to the actual Flash movie making it appear seamless to the user. The next problem is that once the user has focus on a Flash movie it’s impossible to shift focus out of it again without reverting to the mouse so I’ve added a function so that when the ‘Esc’ key is hit, the current element will lose focus allowing the user to continue down the page again. This second part obviously isn’t an ideal solution but I reckon it’s the best way until Mozilla implements a proper fix.
