Robin Christopherson introduced a problem at the @media 2006 conference that I had never imagined. Can a person using voice recognition software use your image-based links? What about links that use image-replacement? It’s a simple enough question, the answer may surprise you.
Imagine your boss just messed up her shoulder jumping her Harley over 3 school buses and a hot dog cart. Worried about the lack of productivity, she purchases the latest version of Dragon Naturally Speaking or other voice recognition software. After a hard day of work, she decides to start doing some shopping online for a new television.
The site has a big button on the product page that says: Compare Prices. Let’s make that button work for her.
Alt text to the rescue
If the link includes a simple inline image, you just need to make the alt attribute match the words in the button.
That was pretty easy. Title attributes are ignored by the voice recognition software. Your boss will now be able to compare prices on her new television and you won’t have to worry about her complaining the next day.
Buttons that use image-replacement CSS
But what if you want a fancy button that has a hover state? It’s easy for a programmer to use CSS to replace the link text with a background image that changes on hover. If you want the link to work with voice-recognition software, you need to make sure the link text matches the button text.
I’ve had problems with this recently as the visual design changed the text on a button from "Buying Info" to "Compare Prices." Christopherson’s presentation made me realize how easy it is to break this functionality with image-replacement.
Flash – ugggh
Just hope your boss isn’t trying to shop from a site that uses Flash for their interface. She would need to use the "mousegrid" command to zero in on the link by defining the region of the screen it is located in.
Make your voice-recognition users happy
The example above is loosely based on a real-world example. My boss, Wes, injured his shoulder when he crashed his Harley on the freeway. We installed Dragon Speak on his computer to help his recovery. This is not a population you can ignore. You can insure your sites are accessible by simply matching the alt text or hidden link text to the words in the image. It’s pretty darn simple.
