Can you hear these images?

Posted July 12th, 2007 at 12:03 am by Victor Tsaran, Yahoo! Accessibility Program

 10 Comments / Filed in: Behind the Scenes, Video

• Images/menu3
• gr2/rssicon_green
• balloons/balloon_mods_nancydrew
• yahoo_music4/20070605_internal_1_220×125_mu_lyrics_singit

Do the phrases above mean anything to you? If they do, then you are genius! If 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!

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

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

Post a Comment Bookmark This Digg This

10 Comments Add your own

Paul Stamatiou | July 12th, 2007 at 2:20 am

This is one of the better articles I’ve read on Yodel Anecdotal. As a web developer dude I’m always trying to follow standards and develop sites that are screen reader/508-friendly and all of that. I’ve never seen what screen readers are like or what they do, so this video was highly insightful. Thanks!

Philipp Lenssen | July 12th, 2007 at 4:54 am

It should be noted that there’s nothing bad about omitting an actual alt value *as long* as you provide the alt attribute. When the HTML author writes alt=”", then the screen reader should not speak the file name, but simply omit this altogether (at least ideally). This IMO is better than abusing alt attributes to become descriptions of an image, or the image title (which belongs in the title attribute) for those cases where the image’s message is already doubled in the text. Only when the alt attribute itself is missing — which means the page won’t validate according to the W3C specs — should the screen reader or text browser use fallback info points like the image source.

As a for instance, I’m often using icons in blog posts; one icon represents Gmail, another icon represents Orkut, and so on. However, I also include the “Gmail” or “Orkut” keyword in the post’s subject itself, so the icon is not strictly needed and only serves a purpose as additional visual clue for those contexts where visuals are available (e.g. it allows easies fast scrolling through the post). IMO it would be harmful to now use an alt text like “A red mail icon representing Gmail” or something similar. It would also be redundant to use something like the keyword “Gmail,” because now the blog would appear like the following in contexts where the visual is missing (which can also be a text browser on the phone, or a search result snippet, etc. not just text-to-speech circumstances — alt must cater to all of these):

Gmail Releases New Feature
Gmail
Gmail today released a new feature which … etc.

Shahid | July 12th, 2007 at 7:23 am

Can you worry about the company and generating revenues?

Jim Thatcher | July 12th, 2007 at 3:09 pm

Philipp Lenssen commented: “I’m often using icons in blog posts; one icon represents Gmail, another icon represents Orkut, and so on,” adding that there is text there too making the image redundant. If an inactive image (not a link) is reduntant the correct alt-text is alt=”" as Philipp says. Screen readers will ignore the image. BUT all to often folks do that for image links. If an active image (an image inside an anchor by itself) has alt=”" screen readers treat it as is there is no alt-text and try to speak something about the anchor, href or src, to say where the link goes and you then get jibberish like that at the top of this article. To avoid the repetition, combine the image with the text inside the anchor – then it is good to use alt=”" on the image.

Darrell Shandrow | July 12th, 2007 at 4:14 pm

Dear Victor,

While the accessibility efforts at Yahoo! are most certainly appreciated, I must ask one critical question! Why on Earth hasn’t Yahoo caught up with other big players like Google and Microsoft by implementing an audio version of its CAPTCHA? The use of a telephone call-back scheme that works only about half the time is separate and unequal treatment of blind and visually impaired people. The resulting “no blind people allowed” sign presented by visual-only CAPTCHA represents obvious discrimination, especially now that audio CAPTCHA tools exist all over the place. Come on, folks, please, get with the program on this!

Petro | July 13th, 2007 at 8:10 am

Please provide audio captcha and fix up your new web based Yahoo Instant Messenger service. This is the new Yahoo IM that works via the web not the download version I am talking about. Currently it does not work with Jaws 8. You are using flash withis new IM and it is still in beta so I know it can be improved for sure. Thank you for educating the sighted on how screen readers work.

Victor Tsaran | July 13th, 2007 at 10:00 am

Thanks for the feedback, everyone.

@Darrell & @Petro: We are aware of the difficulties that visual word verification presents for visually impaired users, and are actively looking into various alternative solutions to address this problem.

As for our new web-based messenger, I’ve been talking to the team about the need for more robust keyboard support. Please consider Web Messenger as a work in progress and be assured that we are looking into making this application as friendly to users as possible.

Thanks for reading.

Vince T. | July 14th, 2007 at 1:16 pm

I couldn’t agree more with Darrell and the others about the major problem caused by Yahoo! CAPTCHAs. Having been a keen user of Yahoo’s services before CAPTCHAs came in, I have been withdrawing from everything on Yahoo! simply because I cannot access my own work. E-mails to Yahoo! support have been met with robotic answers that have nothing to do with the problem or accusations that I have been abusive. This really does not encourage any loyalty. Blind people are surrounded by sighted family members, friends and colleagues who can also observe all this going on, so it isn’t just a problem for a small minority.

It is good to read in this blog that Yahoo! are working to address the problem, and I hope that this is genuinely the case. It would be good to be able to restore some of my old activities.

Iain Lackie | July 16th, 2007 at 1:52 am

It seems to me that if Yahoo! are serious about accessibility, then something should be done about those screens where the contents of an image have to be keyed. If Google can provide an audio equivalent of the image, we know it can be done. In these days when equality of accessibility is stressed, it is to my mind not right that we as blind people should have to go through hoops which our sighted colleagues don’t.

Jacques Snyman | Website Design | June 7th, 2009 at 8:46 am

Paying attention alt tags is a very important aspect of optimizing your site for search engines and humans alike. Allocate meaning relevant to the picture to them, so both humans and search engine spiders can relate keywords to your pictures.