What is alt text, and how do I write good alt text?

Question

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?

Answer 1

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).