this way of writing alt text ok/better even?

[johnyboy]

hello,

i asked this question in the google search forum on here (because i started off asking something else but it turned into this question), got one good answer but thought i'd ask here as it's more appropriate, and for some other opinions:


say i'm doing a web site for one of those traffic navigatioin devices you have in cars. say my banner image is like an advert image -- no text just an image showing/exagerating the product's benefit. eg for the example navigation product say its feature is to help you avoid traffic jams so the banner image is an image of a super man like chraracte flying through the air, over lots of cars in a jam below. so a bit of the html might look like:

<h1><img src="superman-banner.jpg" alt="Superman flying through the air, arms outstretched in front, over a grid locked traffic jam below; where people aren't going anywhere, sitting fuming." /></h1>
<h2>The Super-duper Navigation Device</h3>
<p>Helps avoid traffic jams.</p>

that's the kind of way i'm writing the alt text at the moment -- reasonably literal description of what's depicted in the image.

i'm wondering if i should be generalising/summing up more? eg:

<h1><img src="superman-banner.jpg" alt="Complete traffic jam avoidence." /></h1>
<h2>The Super-duper Navigation Device</h3>
<p>Helps avoid traffic jams.</p>

"Complete traffic jam avoidence." does say what the image says -- that's the intended message you're supposed to get from the image (part of the beauty of communicatioin like in the not so good superman example is that the actual message is underlying and implied -- which works way better from images than text[*]). but how should i translate the image into words? on what level? (i can't believe i just said "on what level?" but it does seem reasonably appropriate).
[*] that's part of the problem that's put me into a bit of undecidedness.

"Complete traffic jam avoidence", or "Superman flying through the air, arms outstretched in front, over a grid locked traffic jam below; where people aren't going anywhere, sitting fuming" -- which is better for the image? generally i'd have thought the longer version is more useful, but maybe not? one place it definitely isn't good is when the alt text gets repeated in google's search listing. in google the longer more descriptive version would appear somehing like:

...
Superman flying through the air, arms outstretched in front, over a grid locked traffic jam... The Super-duper Navigation Device, Helps avoid traffic jams
...

something like this would be much more preferable in google's search results:

...
Complete traffic jam avoidence. The Super-duper Navigation Device. Helps avoid traffic jams.
...

the second one is much better (so far as it appearing in google is concerned anyway).

another way of asking the same question: in an image's alt text is it ok/good to paraphrase the image in an *incredably* short, simple way completely ignoring the literal details in the image, but summing up the image's core/base message?

i remember one bit of advice i read somewhere about writing alt text. something like: try and say in the alt text what the image is saying. "what the image is saying" -- that makes the very short core/base message version, "Complete traffic jam avoidence", seem a better way to write it? any opinions?

thanks.

[AutisticCuckoo]

The text equivalent should be just that: a text equivalent. It should convey the same information as the image, not describe it.

Just think, 'what would I write here if I couldn't use an image'. The appropriate ALT text for an image depends on the context where the image is used.

I've described some scenarios in the HTML FAQ that may be of some help. It's about cows rather than Superman, but you'll get the idea.

[malikyte]

Plus...if you were using a screen reader that audibly converted the ALT text to words (and slowly to be clear), what would you rather wait listening for to get to the rest of the content?

Clear, concise, and correctly ...hmmm, can't think of another word beginning with 'C'. (edit: ) Ahhh...contrived.

[cranial-bore]

For this example I think empty alt text would be most appropriate. The image is only illustrating a concept which you explain in the rest of the document.

Anyone browsing without images will still get all of the content, just not your visual representation of it, which is par for the course when disabling images!
And the visually impaired probably aren't going to be driving anyway....

IMO the <h1> is probably best reserved for the actual page heading too.

[jason.farmer]

So

<h2>The Super-duper Navigation Device</h3>

should read

<h1>The Super-duper Navigation Device</h1>

?

[Stormrider]

Yes. Alt text is not a description, use longdesc for that instead if you want to.

Also, you have an opening h2 with a closing h3 in your example...

[jason.farmer]

Oh and while we're picking holes ...

avoidence

is not a word in any dictionary I can find...

[Black Max]

And your socks don't match.

[hannson]

You know the saying "A picture is worth a thousand words" ... So I try to describe every image with exactly 1000 words.

I think you need to use the right tool for the right job here... I wonder if someone has summarized different images and their preferred ALT texts to give ignorant developers like me some good insight on how this should be done right. I feel the WCAG gives us too little info on that subject because it's only a small drop in the sea.

From the WCAG

Example.

<IMG src="97sales.gif" alt="Sales for 1997"
longdesc="sales97.html">

In sales97.html:

A chart showing how sales in 1997 progressed. The chart
is a bar-chart showing percentage increases in sales
by month. Sales in January were up 10% from December 1996,
sales in February dropped 3%, ..

It seems to me that in this case the "Sales for 1997" alt is kind of an entry in to the report.

I sometimes try to put the same text in to ALT as I would put in title="" (what appears when you mouseover the element)

bah... I have no idea what's going on...

[johnyboy]

> I feel the WCAG gives us too little info on that subject

right. i haven't looked but if what you've posted is the bulk of it then yes. i don't think their alt text in their example is much good either. i haven't seen the image but going from what's above i'd have thought something like

alt="Sales for 1997 monthly bar chart. January up 10%, December down 3%."

Edit:

although, slight change, with the word equivalent in mind maybe this instead:

alt="Sales for 1997: January up 10%, December down 3%."

would be more useful than 'Sales for 1997' to someone viewing the page without images. seems a better replacement to me (although what it should be depends on the context as stated below).

> bah... I have no idea what's going on...

the main thing i got from AutisticCuckoo's faq (linked to above) is, what the alt text should be is *very* dependent on the context -- varies radically depending on what the context is. i still don't fully get it but that helps. also what he said: "a text equivalent. It should convey the same information as the image, not describe it." (although according to his faq in some contexts describing it literally is appropriate -- again; it's v. dependent on context).

> I sometimes try to put the same text in to ALT as I would put in title="" (what appears when you mouseover the element)

yes having decided an alt text should be the equivalent not a description of the image it's very likely that if you are putting a title on the image they're going to end up being the same i reckon. eg i have an image of a sealant gun with the word SEALANT written on the tube, with a large red cross over it. the alt text was a description of the image, and the title text was "No need for sealant". now, i guess the alt text should also be that -- same as the title text.

i bet a lot of alt text is miswritten, with the wrong intention in mind, although i could be wrong.

[REMIYA]

What about these:

1. <img src="superman.gif" alt="Superman" />
2. <img src="superman.gif" alt="Image of Superman" />
3. <img src="superman.gif" alt="Image of Superman Flying Arround" />
4. <img src="superman.gif" alt="Image of Superman flying through the air, arms outstretched in front, over a grid locked traffic jam below; where people aren't going anywhere, sitting fuming." />

The shorter the best. Keep in mind there is a visible text also. Best No.2. Good No.3. Bad No.4.

Webpage size still matters.

[griffon]

Yeah as short and simple is best I think.

Suppose the image is a link. Should one state that in the alt text?

e.g.

"Link to BBC article on Superman"

"Click to open a 150 KB image of superman"

[JackP]

2. <img src="superman.gif" alt="Image of Superman" />The shorter the best. Keep in mind there is a visible text also. Best No.2. Good No.3. Bad No.4.

Surely not? Most screenreaders will announce that they've arrived at an image, so having "image: image of superman" read out to them may be overkill ...

FWIW, my votes would be for something like "the super-duper navigation device helps avoid traffic jams" although there is an argument that this is not needed if the information is also found in the text (and it isn't a link). On the other hand, you may want to add the full alt text anyway, even though it's something of a repetition, but if it's a link you may also want to consider what it's a link to.

If it's information about how the super-duper nav whatsit help avoids the jams, then the above might be appropriate. If it's generic information about the Super-Duper Nav thingy then something more generic might be suitable like "the super duper nav whatsit".

Oh, and Tommy's article on cows is still the best reference guide I've ever come across for alt text. Rock on, Tommy.

(with apologies to anyone who understands the reference).

[AutisticCuckoo]

Thanks, Jack. Apology accepted.

[REMIYA]

Surely not? Most screenreaders will announce that they've arrived at an image, so having "image: image of superman" read out to them may be overkill ...

Actually when the image is not displayed (there are many reasons for this) the words "Image of Superman" will appear.
If you make it just Superman, the user will get confused.
If you make it longer the user will get even more confused and subsequently upset, which will not be in favor to his visiting your website again.
So pay attention to this sentence: "Keep in mind there is a visible text also." Use the text not the image as text, and don't change in whatever circumstence their usage for they have different purpose.

[JackP]

If you make it just Superman, the user will get confused.

That's certainly possible, but I would prioritise the needs/desires of users with screen readers - who don't need "image" announced twice - as opposed to visual users who for whatever reason (like you suggest there are many) are unable to have the image displayed and instead see the alt text in its place.

Of course, this may be because access to users with disabilities is of particular importance to me, and not everyone would necessarily rank this as highly.

If you make it longer the user will get even more confused and subsequently upset, which will not be in favor to his visiting your website again.

I don't entirely agree with you here: I'm presuming you're talking about a case where the image is not visible, and someone is looking at the text visually and isn't able to see it all because it's larger than the image size.

I would possibly dispute how 'upset' someone would get in these circumstances, but even assuming this was the case, I would again contend that it is of greater importance to ensure that the needs of the users with disabilities is met.

However, one option which could possibly be explored is to consider the use of a plain-text caption associated with the image. If the image isn't a link, it's therefore just decorative and can have a null alt text (alt=""), because the caption underneath - which will be available to users with screen readers, as well as being fully visible even in the event that the image isn't - will contain the requisite information.

[AutisticCuckoo]

If you feel the need to start with 'Image of ...', you have not chosen a good text equivalent. A text equivalent should be able to stand by its own, and it shouldn't matter whether you see the text equivalent or the image.

In this case Superman has nothing to do with anything. He's just being used as an advertising gimmick. The information that is conveyed is something like 'Avoid traffic jams', which should be a suitable text equivalent that doesn't need to be qualified by 'Image: Avoid traffic jams'.