20

When I upload an image, the image button inserts some text that says "enter image description here". What is that text for, and what should I replace it with?

18

This text is called the alternative text or "alt text." Users with impaired or no vision, poor internet connections, or other difficulty with loading and viewing images will see or hear this text instead of the image. Alt text should not be confused with "title text" (tooltips), captions, or other text that accompanies an image. In most cases, if the user is seeing or hearing alt text, they are not seeing the image at all, and vice versa.

The W3C has an extensive document describing their recommendations for alt text. Here is my summary:

  • The alt text should be functionally equivalent to the image. Your question or answer should make sense if you replace all images with their alt texts. (All of the other rules are just special cases of this one.)
  • The alt text need not describe everything in the image. It should describe the image in a way that's relevant to your question or answer.
    • If someone asked for an image of thing X, and you're writing an answer with such an image, the question is really "What does X look like?" Your alt text should answer that question, at least in broad terms (and in particular, the alt text should not be "An image of X" with no further elaboration). You don't have to write a 10 page essay on the subject, of course. Just provide a basic description of one or two sentences.
  • The alt text should not repeat things covered in the surrounding text, but it's perfectly all right to refer to the surrounding text (e.g. "Bar graph of the data described above" or "Map of Middle Earth, described below").
  • Images of text should usually have that text transcribed either in the alt text or in the surrounding text. If the latter, the alt text might say something like "Image of Tolkien's letter, transcribed below." If the image is clearly legible, the transcription can go in the alt text; otherwise it should probably go in the surrounding text so that everyone can read it.
  • If the image is purely decorative, entirely redundant to the surrounding text, or your post still makes sense with no image at all, you should have an empty alt text (which instructs a screen reader to silently skip the image). This should be done carefully, because if you ever refer to "the image" in your post, users with screen readers won't know what you're talking about.
    • If the image is a clickable link, then the W3C doesn't consider it "purely decorative" any more, so you should provide some alt text in this case (usually describing the link target). Alternatively, remove the link if it's not needed. Many screen readers will try to describe every link on the page, and they may behave unhelpfully if there's a linked image with no alt text (e.g. the reader might announce "link image: no alt text" or similar, leaving the user with no information about what the link does).
  • 1
    If the image is purely decorative, there is no reason to include it at all :) – Gallifreyan Jul 2 '17 at 8:07
  • 1
    Might be good to mention what W3C stands for. – Rand al'Thor Jul 2 '17 at 12:30
  • Hm. Maybe I should open a screen reader and see what it does; by default, the built-in SE image uploader creates an image that's also a link to that image. That may affect how we fill in alt texts as per your last bullet point. (Or maybe the reader will just skip it if it sees that the link is to the same image? More information is required.) – Shokhet Jul 2 '17 at 16:15
  • Thanks for this awesome and informative Q/A, Kevin!! :) – Shokhet Jul 2 '17 at 16:16
  • I try my hardest to write good alt text. Still can learn a lot though, thanks for this. – Möoz Jul 2 '17 at 23:13
  • Huh, I always thought it was meant as more of a citation thing. Gonna have to go back and describe 30+ book covers now. @kevin I think the links you give are out of date. I didn't explore all of them, though. – eshier Mar 22 at 17:03
  • @eshier: Unfortunately, the "latest" version has a note that the W3C "has discontinued work on this document" so I am disinclined to point at the disfavored copy. The old links still work, they just have an ugly notice on them. – Kevin Mar 22 at 17:39
  • Yeah, I followed links and Tables of Content to get to this and decided that was as far down the rabbit hole as I was going. I got the gist of it from your answer. – eshier Mar 22 at 17:41

You must log in to answer this question.

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