Can you hear these images?

  • Images/menu3
  • gr2/rssicon_green
  • balloons/balloon_mods_nancydrew
  • yahoo_music4/20070605_internal_1_220x125_mu_lyrics_singit

Do the phrases above mean anything to you? If they do, then you are genius! Logo of alt= CampaignIf they don’t, then, don’t worry. You are not alone!

This is what I, as a screen reader user, hear when I come across an image on the web that does not have "ALT attribute" or, speaking in simpler terms, is not labeled with alternative text. Put several of such images together or sprinkle tens of them throughout a web page, and you’ve got an unpleasant browsing experience and a very unhappy user.

The Yahoo! Accessibility Stakeholders Group decided to do something this week to help reduce the number of unlabeled images on Yahoo! web sites as well as to encourage Yahoo! developers and designers to pay attention to things that are not readily visible on the screen. In other words, you do not always get what you see!

ALT attribute, as it's known in the developer’s world, is a feature of HTML language to provide alternative text for any image on the screen. Alternative text is invisible to the user, but is used by screen readers to describe the image to a blind user or by the browser to display something inside the image placeholder while the image itself is loading (this normally happens on a slow connection). Thus, our internal ALT= campaign came into existence!
alt=”barista”alt=”picture of larry tesler”alt=”AJAX god”

Listen to the screen reader sound sample of images with and without ALT attribute. Can you guess which is which?

[audio:http://ycorpblog.com/files/YahooKids_Graphics.mp3]

The ALT= campaign is just one of the many programs my team has created to help Yahoos keep universal accessibility in mind as they design and build our products. We hope it'll improve your experience across our network. And if you have a web site, please mind your ALTs.

For an introduction to how a screen reader works, check out this video (courtesy of the Yahoo! User Interface Theater).

Victor Tsaran
Yahoo! Accessibility Program Manager