Alt text for images

Some considerations:

The alt attribute for the img element is often ignored or misused. If it is omitted, the page will fail validation using current Doctypes. If it is "bypassed" using "" it will not be of much use to People with Disabilities or visitors employing text-only Browsers or audio screen readers.

If you are having trouble visualizing what alternate text is needed try this: imagine you are blind and using a reader/interpreter such as JAWS; or have impaired vision and are using a text-only Browser such as Lynx with enlarged text selection and images turned off; or have a disability that requires use of an audio screen reader.

Each time an audio output screen reader comes to an image it will announce "image" and then read the alternate text aloud -- if there is none there will just be a silent pause. If it is a text-only Browser (some sighted Web visitors use them for speed of browsing) the alternate text will display for each image -- if there is no alternate text there will just be a blank space (or ""). As you compose the alternate text for an image imagine the questions one of the above described visitors may have about the image: What does it depict? Why is the Web author using it? what kind of image is it? (examples): It is not much use to employ alternate text such as "[picture]" far better to use something like "[photograph of the house I grew up in]" --- not much use to employ "[icon]" far better to use, for example, "[W3C XHTML Validation icon]" -- not much use to employ "[ad gif]" better to say ["animated gif representing the CDs I offer here]" .......... and so on.

James

 

do you always title when you alt ?

 

Yes. Even a blank title="" attribute, just to get around a nasty bug in Internet Explorer.

 

Well said. I usually use something like "header-left", "header-logo", "header-right" etc in my designs, but the way you put it, I didn't think much about the handicap thing.

 

For the header image, I just use "(Web Site Name) Logo" where "Web Site Name" is the name of the Web site. For example, if I was in charge of CNN.com's Web site, I'd have the alt="" text for the logo be "CNN.com Logo"

 

Dan, what's this IE bug? I've used title attribute here and there but not regularly. Is this for images or for links??

 

IE has this stupid tendency to treat alt text as tool tips. Using a TITLE attribute (whether empty or containing descriptive text about the image) suppresses that wrong behavior.

 

Ah, yeah. I usually don't see that as a problem, but what I need to stop is Opera displaying the link on hover-- because when I use Mike Cherims Pop Maps idea to make something like a CSS tool tip, the address often covers the text. I wonder if "title" would get rid of that, so long as I make the title short enough.

 

I don't have that problem in Opera.

 

I usually post Alt for images to get more keywords in for related content, it thus help describe content for the visually impaired.

 

Then you're going about it the wrong way. The alt="" attribute is used to identify the image for those who cannot see them (blind people, those who surf with images turned off, people using text-only browsers like Lynx, search engine spiders, and so on). If you want to describe the image, use the title="" attribute and/or the longdesc attribute.

 

Dan, maybe it's a user setting then? I don't customise my browsers. I've seen it on both the 'blows machine at work and the Linux box here. Since the Pop Map trick uses <a>'s leading to their own ids, Opera shows the (fake) address like a tooltip. Maybe it can be turned off but I dunno how agressive Opera users are in changing default settings.

 

It might be. I know I made some changes to Opera, but I don't think that was one of them.

By the way, congratulations on reaching your 1,000th post.

 

If I don't get a cookie or something for it, eh. So now I'm a Native American or something. But it's funny, I knew nothing about nothing when I first started posting here.

 

There is another reason to use alt as well. Many pda users opt to not download pics to speed up their browser. Improper or no alt tags are then rendered useless. It's best to only use pictures when you absolutely have to, and when you do, just label them for what they are.

 

Good point, camp185 (though it was covered in this post on the thread: http://forums.digitalpoint.com/showpost.php?p=6501276&postcount=11 )

 

I am of the opinion that if you are using alt="", YOU SHOULDN'T BE USING AN IMAGE TAG IN THE FIRST PLACE.

By definition that should make the image presentational, and presentation goes in your CSS, NOT in your markup.

The alt attribute should say what the picture is for screen readers or people browsing with images off - you don't want it to appear in either, don't use IMG. END OF STORY.

... as to title, 99.9999999% of the time you shouldn't be needing it on an IMAGE as alt text should do the job JUST FINE... There's no need for more... as to using it on other tags it serves NO REAL PURPOSE ANYWHERE but on an anchor - and quite frankly if you need a title tag on an anchor, YOU HAVE THE WRONG TEXT INSIDE THE ANCHOR.

 

^Unless those using a Tranny doctype still insist on "target", in which case their anchor titles should say something like, this link will try to shove a new window down your throat." I say, that's damn useful!

 

You might just be on to something there...

 

Can we use Alt="sometoptip" and title="sometooltip" together for the images.