25

When you add an image to a post via the helper bar, you get this:

![enter image description here][1]

[1]: https://i.sstatic.net/ve8n0.png

What purpose does the enter image description here text serve? I've not noticed any way of seeing this text, except if I view the page source for the post.

2

4 Answers 4

43

The alt (alternative) attribute is used when the image fails to load, or for user agents that can't display images (screen readers, very old mobile browsers, etc.)

According to the HTML5 specifications,

The most general rule to consider when writing alternative text is the following: the intent is that replacing every image with the text of its alt attribute not change the meaning of the page.

This means that the "image description" hint is actually not very accurate. If the image is not important (in the sense that describing it will not help readers), is purely decorative, or if its content is already described by the surrounding text, then the attribute should actually be left blank.

Whatever you do, do not leave the placeholder text in, since that is worse than leaving it blank.


If you need a tooltip, you can use the title attribute. In Markdown, use

![alt text][1] 

 [1]: http://example.com/image "Your Title Here" 

or

![alt text](http://example.com/image "Your Title Here")

For example,

the same format is used for titles on links, like this.

6
  • +1 for the last sentence - if you don't have meaningful short description of the image, better leave it blank. Commented Aug 19, 2012 at 10:17
  • Unfortunately on these sites the alt-text might not show nicely, due to the line height, I guess. (source)
    – Arjan
    Commented Aug 19, 2012 at 10:21
  • @Arjan that might be why I've never seen it! It would make more sense to make it a tool-tip? Commented Aug 19, 2012 at 12:08
  • 2
    @Pureferret No, it's not a good idea to display the alt text as a tooltip, since if you follow what the specs say the tooltip would just repeat the contents of the image. If you need a tooltip, that's what the title attribute is for.
    – Yi Jiang
    Commented Aug 19, 2012 at 12:18
  • @pur, you can also specify the title in Markdown.
    – Arjan
    Commented Aug 19, 2012 at 13:28
  • I'm sure a search would have shown you, @pur. But Tim already explained too. That said: I am on mobile, no hover hence no tooltip either.
    – Arjan
    Commented Aug 19, 2012 at 14:28
13

The alt attribute is also used by people with eyesight problems who have difficulty seeing images so is not just a fallback.

So emphasises the text that @TimYiJiang gave from the HTML5 specification

The most general rule to consider when writing alternative text is the following: the intent is that replacing every image with the text of its alt attribute not change the meaning of the page.

2
  • There have been more than one blind user come through the Stack Exchange sites.
    – ale
    Commented Aug 19, 2012 at 15:51
  • IMHO, this is the most important answer. Upvoted. Commented Jan 12, 2022 at 11:15
5

In addition to what the others said, it's also good for searching purposes. Search engines like Google can pinpoint the subject of a picture much more accurately if there's a description in the alt text, than when they have to guess the subject from the context.

1

It adds the alt-text, which is basically a fallback if there is an issue fetching the image. If the image is not found, it'll show a white box with the alt-text in it.

On IE, the alt-text also gives a something similar to a title{*} tooltip, though this doesn't work on Chrome (or, IIRC, Firefox).

So it works exactly as it was intended.

*Curiously, webcomics still call it the "alt-text", even though they don't use the alt attribute. Remnants of a long-lost civilization when everyone used either IE or Netscape, I suppose :S

5
  • 2
    Many work places block imgur domain so it's pretty relevant indeed - when users browse from such places they'll only see the alternative text as all images will be broken.. Commented Aug 19, 2012 at 10:10
  • As an aside: even IE9 still (erroneously) shows alt-text on mouse hover, unless a (empty) title is present as well.
    – Arjan
    Commented Aug 19, 2012 at 10:15
  • @Arjan only with quirks mode pages!
    – Mr Lister
    Commented Aug 19, 2012 at 14:29
  • @MrL, I cannot validate now, but I saw it yesterday in what I think was a valid HTML5 page... But then, IE's F12 developer tools have fooled me before, so maybe it was actually in IE8 or IE7 mode...
    – Arjan
    Commented Aug 19, 2012 at 14:42
  • Ah, @MrLister, you're right: all is fine in IE8 and IE9, if they're not somehow fooled into the wrong mode. Thanks.
    – Arjan
    Commented Aug 19, 2012 at 15:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .