How can I write good alt text?

Question

When editing Stack Exchange posts, a whole ton of them don't have alt text on images. Alt text is important so the visually impaired that have to rely on screen readers can experience and value Stack Exchange’s content as much as anyone with normal sight can.

To be clear, it is the text you would put instead of enter image description here in Markdown:

![enter image description here](https://i.stack.imgur.com/1BAIm.png)

A lot of the time, I don't know what to put in the alt text.

How can I write good alt text for my posts?

Answer 1

For me, adding alt text is really important. Historically I didn't understand why it was important but I've since learned better - people accessing the site using screen readers or otherwise text-only should have the best experience that we can offer them, so if you're editing someone's work that has an image and the alt text is the default, it's very much appreciated if you fix that problem.

Images and infographics are really succinct ways to convey information to people who aren't visually impaired but you should be certain to cover the same information in the alt text - as much as you can. I generally combine explaining the image in the actual body of the post and adding whatever is missing to the alt text.

Let's look at an example that many of you may be familiar with.

This is the iconic image we've used for years to help users understand what is an answer and what is not, particularly regarding link-only answers. It's from Shog9's question Your answer is in another castle: when is an answer not an answer?

Currently the alt text for this reads:

A, NAA, A, NAA, VLQ

Well... this is... possibly useful to people who know what these letters mean but they don't actually describe the image so that someone who can't see it can benefit from it.

Now let's look at the version of the alt text I'm using in this question.

Image composed of five images explaining the variety of answer types through fruit. 1. a red apple, labeled "Answer"; 2. an orange, labeled "NOT Answer"; 3. an apple core, labeled "Partial Answer"; 4. a sign with a pictograph of an apple and an arrow pointing up, labeled "NOT answer" representing link-only answers; 5. a half rotted apple with worms in it, labeled "Low-Quality Answer".

Yes, this is a long description but it actually makes the image useful. Remember, "a picture is worth a thousand words", so sometimes, long descriptions may be necessary.

While my description above is long, it doesn't go into unnecessary detail. I don't describe the color of the apples or the arrow. I don't note which have leaves and which do not. They're irrelevant to the image. I could have chosen a set of images with green apples and made the same point.

And, this sort of description is necessary in Shog's post because he doesn't otherwise explain the image in the question. If the body had included a paragraph like:

These are our five different answer types. We want the whole apple. The orange is not an answer because we want an apple. The half-eaten apple partial answer is not really going to satisfy us. The pointer to where you can find apples is the equivalent of a link-only answer, which has the risks of link-rot described above. And... the rotten low-quality answer apple just makes us feel ill.

It would have been possible (though not necessary) to shorten the alt text and refer to the prior or following paragraph as explanatory.

An image composed of five images of fruit: a whole apple, an orange, an apple core, a sign pointing out where to find apples and a rotten apple with worms. Further explanation in text.

It's good to include any text in the image that is important, as in my long description I noted the labels for each image. Without that text, describing the fruit is less useful. Recently I was posting screenshots of my sock accounts "My Communities" section of the site switcher to illustrate how it works. Here's the image and alt text:

My site switcher showing Parenting - 83 rep, Computer Science Educators - 46 rep, Meta Stack Exchange - 3 rep, Android Enthusiasts - 1 rep, and Arqade - 1 rep

I explain the relevant parts of the image - which sites are listed and my reputation on those sites - but I don't mention the "edit" link or the "more Stack Exchange Communities" or "company blog" because it's not helping to illustrate my point.

Now, is this perfect? I'm still assuming that someone knows what a site switcher is... but I'm hoping that, in concert with the rest of the text in the question and answer, this does more than "enter image description here".

Answer 2

I posited a similar question to chat some years ago as I was finding myself creating somewhat elaborate bits of text to describe the picture in the eponymous thousands words or so. I was informed that that was bad form (screen readers sometimes read all of that text in an unskippable manner, and most people won't see it), so most of mine (on the SF&F SE) simply state what the image is (generally something like "Book cover for Captains of the Universe") and adding a mention of a salient cover feature if relevant (for example, if someone was looking for a "book about some space-travelers with a cover that had a lizard-man stepping on a woman's head", I might post that with alt-text of "Book cover for Captains of the Universe. Cover depicts a lizard-man stepping on a woman's head").

Basically, you want to be informative, but not overwhelmingly so. The alt-text should at least let someone using a screen-reader know what's supposed to be there, ideally providing more information than just "picture showing solution to the question" (maybe, for Puzzling SE, something like "The five colored discs in a straight line in Red Green Yellow Orange Grey order" to say what's actually there).

Answer 3

One thing to avoid is using the alt-text for image attribution, or identifying the source of the image. I did that for a while, and at the time seemed okay, but the info is of no use to anyone who requires the alternative text.

Where attribution info for an image should be stored, well that's another question entirely.

Answer 4

First, it should be noted that the goal of alt text is to describe the image for anybody who is unable to see it for any reason. Maybe somebody is using a text-only browser to cut down on loading time or bandwidth. Maybe somebody is blind, and using a braille display to read an answer. Maybe the imagehost is suffering downtime, permanently taken offline, or changed the nature of their services in such a way that the image may no longer be offered. The point is that it is a contingency plan if, for any reason, the image is unviewable.

The first is that it is more important to have any reasonably accurate alt-text, even if it's imperfect, for the sake of anybody who may need it. To quote English Language & Usage moderator Matt E. Эллен in Call to Action: Fill in Image Descriptions:

You don't have to write like Shakespeare or Nabokov, just something that makes it clear what the picture is of.

If your alt-text can be improved, somebody can always make a proposal with a comment, or try to improve the post by adding a superior description, either from full cloth or building upon what was already there. I would suggest always editing in a basic description if one does not exist already.

However, the second is that the best alt-text effectively describes anything that might be important to the question or answer.

I do not write alt-text very often, but I do remember one time I added the following for Mari-LouA's answer to What Does That Sinatra Bar Act Mean in This Sentence?.

This image shows the cover of a the Frank Sinatra vinyl record entitled No One Cares, which was published by Capitol Records in 1959. It pictures Frank Sinatra at a bar, surrounded by customers who are oblivious to him. He is resting his cheek in one hand, with his elbows on the bar, and casting down a glum look at the drink he is holding in his other hand.

Aside from one obvious typo that should probably be fixed, and perhaps some retrospective neglect to mention the dim lighting, I am quite happy with that description and Mari-LouA seemed to be too.

I was aiming to achieve a few things with this particular text. One was to provide a textual reference that not only provided due attribution, but could also be hypothetically verified and explain the relevant authority of the source material, so that authority would be retained. More importantly, I aimed to describe Frank Sinatra himself, since that was the sort of behavior the supposed "act" was exhibiting. Another was to name the compositional elements contributing to the overall mood of the image, which may have affected Sinatra's mood and caused him to behave as he did.

However, what is also of importance is what I chose not to describe. I did not try to describe what everybody in the crowd was wearing. I did not explain that there were other glasses on the bar. I did not explain that there was a rag or newspaper by Sinatra's shoulders. I did not explain that the bar was reflective. All of that information is visually interesting, but it is of lesser relevance to the point, and a textual description would be much too long, and distracts from the key point that Mari-LouA was trying to prove by exemplifying it.

In summary, try to describe the core elements to the best of your ability, as they relate to the post.

Answer 5

EDIT: Catija says the same thing, but much better. The only useful thing here is the last paragraph, about using alt="" for images that contain no useful information.

Think about the purpose of "alt" text. There are two common situations where it is used:

• The person reading the web page has a visual impairment, making it difficult or impossible for them to see it.
• The image is unavailable to the browser, making it impossible for anyone to see it.

The "alt" text needs to convey the important details that need to be seen, nothing more and nothing less.

Saying "photo" or "picture" is useless and frustrating.

Describing the clouds that can be seen in the sky is pointless if the purpose of the image is to show the contrasting color layers of a snow-capped mountain, a ring of dark growth below the white, and bright green forest below that.

Simply answer the question, what was the point of including this picture in the first place? You'll say something like "so that people can see …". What it is you want them to see is what the "alt" text should say.

And remember, that if the image was included simply for decoration, it's fine (or perhaps advisable) to set alt="" to indicate that it doesn't contain any useful information. That way, if the image is unavailable it won't leave something ugly on the page.