Accessibility – Voice Recognition

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.

compare prices
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.

compare prices

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.

Leave a Reply

Your email address will not be published. Required fields are marked *