How to write alt text for an image in your article.

Start with the image’s job

W3C’s alt text decision tree asks a short series of questions: does the image contain text, is it used in a link or button, does it add meaning to the page, or is it purely decorative? The answer determines the kind of alternative text it needs. Work through those questions for each image rather than describing every picture the same way.

The same photo can need different alt text in different articles. W3C notes that treating an image as informative or decorative is a judgment the author makes, based on the reason for including it.

Write the meaning, not a literal description

For an informative image, W3C says the text alternative should convey the meaning or content shown visually, which typically is not a literal description. Keep it short, usually a phrase or a sentence.

Fictional example. An article about shared drafts includes a screenshot of a folder with three files named update-final, update-final-new and update-actually-final. Weak alt text: “screenshot”. Literal but long: “A window with a list of three file names in a column with an icon beside each”. Closer to the point: “A folder holding three files that are all named some version of final”. It says what the reader would take from the picture.

Leave decorative images empty

If an image is purely ornamental or repeats nearby text, W3C recommends an empty alt attribute, alt="", so assistive technologies such as screen readers can skip it. Describing it would add noise without adding information.

Do not leave the attribute out altogether. W3C warns that some screen readers will then announce the file name, which is not helpful. If you use a visual editor, check whether it has a “decorative” option that does this for you.

Handle links, text and charts differently

These follow W3C’s guidance for functional images, images of text and complex images. If a chart’s key finding cannot be said in a sentence, that is a sign the main text should state it.

• Image used as a link or button: describe what it does or where it goes, not how it looks.
• Image of text: include that text in the alt text, unless the same text already appears on the page. Plain text is usually the better choice anyway.
• Chart or diagram with detail: give a short alt text and put the full information in the page text nearby, so everyone can read it.

Check each image before publishing

Reading the page with the images switched off in your browser or editor is a quick way to see what is missing. This checklist is our suggested routine; it is not a conformance test and does not replace testing with real assistive technology users.

• What is this image for in this article?
• If it were removed, would a reader lose information? If not, consider alt="".
• Does the alt text say what the reader needs, in a phrase or sentence?
• Is the information in a chart or screenshot also available in the text?
• Would the sentence still make sense read aloud, without seeing the picture?

Use this next

• Write headings that help readers
• Check links before publishing
• An editing checklist for your next article