Images and ALT tag solutions

Good job no one is then Stephen, let’s not get sidetracked by left field arguments.

Agreed, so I’ll just cut and paste my last post since you never responded to it:

"Why? Is the only way the visually impaired user has to undertand that message the text in your Alt Desc? It wouldn’t say anything about it anywhere else on the page? No copy leading up to the image? No headings? No explanation at all, just an image of last month GA stats out of nowhere? Strange page. Every argument I’ve heard so far for using the Alt Desc to explain to the visually impaired, as if they were idiots, the message an image is trying to convey in a way that you wouldn’t do for people who can actually see the image just sounds like bad Usability to me.

Wait! My SEO guru award image just says ‘Sitepoint awards’… now, if it said ‘Sitepoint SEO guru award image’ i.e. just describing what the image is of, would that fail to convey the message that ‘this guy supposedly knows a thing or two about SEO’? Are visually impaired people too stupid to know that’s what guru means?"

So you’re saying then that the Alt Desc attribute should literally describe what the image is of rather than what it implies, therebye conveying any meaning the image may have to the visually impaired in exactly the same was it conveys that message to people who can actually see it. And…if you want to then expand on the message contained in the image and actually explain what it’s intended meaning is, you should use the Title tag?

100% agree. Your award image HTML then might read like this then:

<img src=““SitePoint Webdesign Guru Award badge” title=“Webdesign guru award - recognition for contributions to the Sitepoint Webdesign forums during 2009” />

Alt describes what it is. Title describes what it represents.

Because the W3C sayThe generic rule for the content of the alt attribute is: use text that fulfills the same function as the image.”

The function of my image is to convey to the reader that my traffic has doubled in a month. Is the W3 wrong?

I wouldn’t take what sitepoint do as a shining example :D. After all, they’ve neglected to add any alt text for the “advisor” and “mentor” images on this page.

Interesting discussion.

I think the differences in semantics stems from the rather loose definition the W3C states as the purpose of the ALT attribute for images is for. It becomes a subjective understanding of “fulfills the same function of the image”. One could argue this any way and then this becomes opinion with each side seeking supporting examples.

My thinking is that there’s truth in arguments from JJMcClure, Felgall and Dawson - it just probably lies in the middle (closer to where Hooperman is aiming :wink: )

JJMcClure, I think people often confuse the alt attribute as the sole method of putting across value (for accessible enabled devices), your example towards my badge is exactly how it should be, ALT states what the image actually is and TITLE represents what the relationship is between the image and it’s environment (the implied value - anything other than the physical object itself). Take an anchor link in comparison… the anchor value acts like the ALT text in stating that element’s physical contents (the link reference) and the TITLE describes details about what the link contextually means. It seems pretty cut and dry to me, but I guess people have different interpretations of the spec. The following should clear up a lot (for those not in agreement with my earlier link) :slight_smile:

The longdesc attribute is specifically provided for the literal description of what the image contains so there is nor reason for using any other attribute to be used to specify a literal description.

Interesting felgall…

Can you explain better what is and how to use correctly longdesc attribute?

The longdesc attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute. When the image has an associated image map, this attribute should provide information about the image map’s contents. This is particularly important for server-side image maps. Since an IMG element may be within the content of an A element, the user agent’s mechanism in the user interface for accessing the “longdesc” resource of the former must be different than the mechanism for accessing the href resource of the latter.

Sadly (some will say) the longdesc attribute has been retired in HTML5.

No, it’s not. It’s provided for situations when the image can’t easily be described in a few words and should supplement the short Desc.

So in your example, regular users can see a graph from Analytics showing traffic doubling. As well as clearly getting the message because you’ve most likely said something about traffic doubling in a heading or the surrounding text (which is enough to convey the message AND meaning, why use the graph at all unless it’s to make a further point?), they get a further sense of credibility, a sense that you monitor your traffic which implies competence, a sense of mathamatical accuracy etc etc. The Analytics graph adds weight to your statement about traffic doubling.

The poor old visually impaired users only get an Alt Desc which says “Traffic has doubled in one month”, the image could be of anything as far as they’re concerned. They get none of the other intended meanings because they don’t know the image is of an Analytics graph, at best they could guess that’s the case and that’s bad Usability.

I would have simply said “Google analytics traffic graph” or similar in my Alt describingthe content of the image, which combined with using the words ‘traffic doubling’ in my copy or a heading or something around or near the image clearly gets both the content of the image and it’s intended meaning across to someone using a screen reader.

Ever heard of people who respond better to information presented visually? Images don’t need to make further points, they can illustrate what’s already been said in the text.

Let’s be clear. There seem to be two issues here: improper use of an image and improper use of the alt attribute. You seem to have a problem with the image used and not the alt attribute. Is that right? See the bolding above. If that’s the case, we’re not discussing the alt attribute, we’re discussing the presence of an image you suggest is redundant.

As for the “why” question, I already answered that here:

Do you disagree with W3C’s guidelines on using the alt attribute? They say the text should fulfill the same function as the image. As author, I am the one who determines what the function of the image is, so I am best placed to write alt text that performs that same function. In the example, the function of the image is to convey to the reader that traffic has doubled in the last month. The alt attribute fulfills the same function.

Interesting reading but if I really need write that much regarding an image… ok I will put the text in the page together with the image!!! plus some alt with good resume from img itself


Ever heard of visually impaired people? That’s who the Alt desc is for dude and that’s what we’re discussing here. If the image isn’t making a ‘further’ point then what IS it doing? You already mentioned doubling traffic in your copy or in a heading (I hope, cos the alternative is the image appearing out of nowhere and out of context) so why have the image at all? For people who can’t or don’t like to read? Ooops, do I need to point out the contradiction in that?

I don’t disagree with WC3, I disagree with your intrepretation of their guidelines. The Alt desc should describe what the image is of, not what you want to image to represent, and allow visually impaired users to grasp the meaning because it was a well chosen image and easy to interpret. That’s good Usability, something that is being seriously overlooked here. If you have to explain in a Alt desc what an image is supposed to represent then you need to choose a new image.

Of course :slight_smile: But you did ask “why use the graph at all unless it’s to make a further point?” and I explained that it illustrates visually the point made in the text. I think that’s a good reason for using an image. That there are visually impaired people out there isn’t going to stop me from using images to illustrate my points. Nor should it.

Many people benefit from an image or two to support the text on a page - and those images don’t need to make “further points”. I’m not sure why you think that every image needs to make a further point.

This is a contradiction. You say on the one hand that we’re discussing the alt attribute, but then you question the need for the image. So actually we (or you) are discussing two things: the use alt attributes and the need for the image. These are two different things.

As I explained, the image is illustrating the point made in my text. I’m not sure why you think this is wrong.

OK, I’ll break down my interpretation, and you can tell me which bit you disagree with:

  1. Traffic has doubled in the last month so I want to display a screenshot of my Google Analytics illustrating that fact
  2. Determine that the function of the image is to demostrate visually, to those who can see, it that traffic has doubled
  3. Use some text in the alt attribute that fulfills the same function as the image. As the function of the image is to illustrate that “traffic has doubled in the last month” - use that text

Which one of these steps in the process don’t you agree with?

No it’s not, maybe what it is is a poorly explained point. Try this on for size:

The point is that the image is there and it’s saying something, it’s saying ‘look, we know what we’re doing’ isn’t it. To achieve that message it doesn’t have to actually say that to the user that can see it, it implies it, and it can do that for a visually impaired user if you only describe what’s in the image in the Alt.

So, you have some text about how you doubled your traffic and an image of the graph to visually support it, what’s your Alt:

  1. hire us, we know what we’re doing’ (visually impaired user has no clue what the image is of)

  2. traffic doubled last month’ (visually impaired user gets the message but has to guess what the image is of)

  3. Google analytics graph’ (visually impaired now knows what the image is of and can figure out the implication cos it’s obvious)

  4. Google analytics graph showing traffic doubling last month’ (visually impaired now knows what the image is of and has an even bigger clue as to the message)

That’s more like it! :tup:

I’d be proud to have that as my alt text.

I’d use 3 or 4 for sure. I’d never use something that conveyed the message without also telling them what the image was actually of. :slight_smile:

I’m glad we all managed to agree on something, it goes to show how combinations of attributes are just as important as the value themselves. alt + title + longdesc provide a true accessible alternative, where as misuse of the alt description would just make things more difficult for the end user. :slight_smile: