evolt.org Workers of the Web, Evolt!

I recently spent a day learning how to make Flash accessible. That included downloading a screen reader called Window-Eyes (from GW Micro, Inc.) and freaking myself out with it for a while. The reader voice was similar to that of Stephen Hawking (who has his own accessible site). Yes, the Stephen Hawking Speak and Spell voice. It was like having him here with me narrating my website. I chose to code and test Flash accessibility on my freelance site, because it was new and not a large site (Note: Since I wrote this article, I've also published accessible flash sites for clients). If you follow the tips below, making Flash accessible is not a big chore.

During the coding, I discovered, “what they don't tell you.” Macromedia support and GW Micro were very helpful and confirmed that I had found a “known issue.” There is no onmouseover vocal state for Flash movie buttons. The Flash player only provides a tab vocal state. That make sense when you realize that blind users don't use a mouse, but it's quite disconcerting to test the site, onmouseover a button, and have Stephen Hawking say, “graphic,” for every button. When you load the page and tab through it, the text reader properly identifies the Flash movie, button and the link. If you use the mouse, as I had expected some visually impaired users might do, it makes no sense at all. Most of my day was spent trying to figure out what I had coded wrong. I tried every possible accessibility element/variable combination in Flash. Many developers might just trust Macromedia's software and have no idea how it works with voice readers. This can be a terrible mistake and render your site useless to the visually impaired user.

I was successful and my site is Flash accessible. Thinking of how your site flows is one thing. Doing it with your eyes closed and only using tab, tab+shift, and enter is completely different. Stephen Hawking and I navigated through the whole site. Making Flash accessible isn't difficult; developers should not just trust Flash MX to do it for you. While Flash MX does produce accessible results from default, there are few tips you need to know to make it work.

1. Read Joe Clark.
   Clark's ALA articles and website are very informative. Macromedia's design guidelines are also helpful, but can be confusing. You just don't know a voice reader works, until you test it yourself. At this time, Flash is only accessible in Player version 6 with Window-Eyes 4.2, using Windows Internet Explorer 6.
2. Listen to your site.
   It's very helpful to download the demo version of the Windows-Eyes screen reader. This is important because, according to Window-Eyes, a visually impaired user uses the keyboard 90% of the time. While you can tab through all sorts of tasks without their software, the screen reader allows you to hear the user experience. You'll be surprised at what you hear. Note that the demo will time out after 30 minutes, but you can reboot it an unlimited number of times. It is also not modal, meaning you cannot toggle the demo on and off. It runs at startup for 30 minutes and that's it. However, you do get a good test method without purchasing the software. If you download the demo version of Window-Eyes, try Microsoft's Text-To-Speech Robot #1. It's the voice of the Cylon Centurions from Battlestar Galactica.
3. Tab through your movie.
   Even without using Windows-Eyes, you can tab through your Flash movie. Click on the movie, tab through the buttons, and hit enter to go to a link. The Flash player will yellow-highlight the buttons as you tab through them. Remember mousing through the movie won't work with the Flash player and Window-Eyes and this is not how most visually impaired users will access your site.
4. Label with care.
   I read through Macromedia's design guidelines, but still wasn't sure how it worked. I tried and listened to several label variations. What worked was to choose, “Make Movie Object Accessible > Make Child Objects Accessible > Autolabel,” in the Accessibility palette. I then named the movie, “Flash navigation,” and did not name the buttons. By default, Window-Eyes will read the text buttons. As I discovered, adding a name and description to the button is not helpful, instead it's very annoying, “Button, about,” is clearer then, “Button, About, Link to about page, about page is about this site.” On my site, when Flash loads, Windows-Eyes alerts the user that Flash is present and reads, “Flash navigation, Button: About, Button: news,” and continues through the rest of the navigation.
5. Don't stop at Flash.
   Flash MX does make it easier for the developer, but don't forget other accessibility considerations. Check Christopher Schmitt's ALA article on Accessibility and Authoring tools and Dive Into Accessibility. Besides the Flash, listen to how the rest of your site sounds. Or, at least, try tabbing through it.

As I learned, with the help of Stephen Hawking's voice making Flash accessible is not difficult. Flash MX makes it easier, as long as you know how Flash player 6, Window-Eyes, and IE 6 work together.