Educational Blog

How to Write Descriptive Alt Text for Blog Images

Learn how to write accurate, useful alt text that improves accessibility and gives search engines meaningful image context.

Alt text is a short written description attached to an image so people who cannot see it can understand its relevant meaning. Good alt text also gives search engines clearer context, but accessibility should guide every wording decision.

What alt text is and why it matters

Alternative text, usually called alt text or an alt attribute, is read aloud by screen readers when an image appears on a webpage. It may also appear when an image fails to load. The description should communicate the image’s purpose in the surrounding content, not merely identify every visible object.

For example, an image of a person holding a laptop could have several reasonable descriptions:

  • Weak: person with laptop
  • Better: Freelancer reviewing a project schedule on a laptop
  • Best for a tutorial: Project manager reviewing a color-coded schedule on a laptop before a client meeting

The best version depends on what the article is explaining. If the image is only a decorative banner, the correct alt text may be empty rather than descriptive.

Alt text helps readers who are blind or have low vision, supports people browsing with images disabled, and can improve the clarity of your content structure. It should not be treated as a hidden space for adding extra keywords or marketing copy.

Start with the image’s purpose

Before describing what you see, ask what job the image performs in the article. The same photograph may need different alt text in different contexts.

Use these questions:

  1. Why did you include this image?
  2. What should a reader understand after encountering it?
  3. Does the image provide information, demonstrate a process, identify a person or place, link to something, or simply create visual atmosphere?
  4. Would removing the image make the surrounding text less understandable?

Suppose a blog post explains how to prune a rose bush. A photo showing the correct cutting angle should mention the pruning position. A decorative photograph of roses beside the introduction may only need empty alt text. A chart comparing pruning dates needs a concise summary or a nearby text equivalent.

Read the sentence before and after the image. Often, the surrounding copy already explains some details, so repeating them makes the alt text unnecessarily long. Alt text should fill the information gap, not duplicate the entire paragraph.

A practical formula for writing alt text

A reliable starting formula is:

Subject + action or important detail + context or purpose

Examples:

  • Chef measuring flour into a bowl for a sourdough recipe
  • Mobile checkout screen showing the shipping-address form
  • Line chart showing email sign-ups rising from January through June
  • Red hiking backpack resting beside a trail map

You do not need to force every part of the formula into every description. Include only details that help the reader understand the image.

Write in a natural sentence or phrase. You generally do not need to begin with “Image of” or “Picture of” because screen readers already identify an image as an image. An exception may be useful when the type of visual matters, such as Portrait of author James Baldwin or Map of downtown Chicago showing the walking route.

Describe the most important information first. If a photo shows a crowded conference but the article discusses a speaker presenting a privacy policy, lead with the speaker and presentation rather than the audience, room size, and decorations.

Include the details that change meaning

A useful description is selective. Consider including details from these categories when they are relevant:

  • People: Who is present, what they are doing, and any relevant role or relationship.
  • Objects: The specific item or feature the article discusses.
  • Actions: What is happening, especially when the image demonstrates a process.
  • Setting: A location or environment when it provides useful context.
  • Text: Words that are visible and important to understanding the image.
  • Color: Include color when it distinguishes items, communicates status, or is central to the instruction.
  • Position: Use terms such as “left,” “right,” “top,” or “center” when location matters.
  • Emotion or tone: Mention visible emotion only when it contributes to the image’s purpose.

For instance, dashboard with several widgets is vague. If the post explains an alert, Analytics dashboard with a red traffic warning in the upper-right widget is more useful.

Avoid assumptions that cannot be supported by the image. Do not infer a person’s job, identity, health condition, ethnicity, income, or feelings unless the context explicitly establishes it and the detail is necessary. Instead of happy customer, write customer smiling while holding a delivered package if the smile is visibly relevant.

Keep descriptions concise without losing meaning

There is no universal character limit that makes alt text correct. The right length depends on the image and its purpose. A simple product photo may need only a few words, while a process diagram requires more explanation.

As a practical editing method:

  1. Write a complete first draft.
  2. Remove details that do not support the article’s point.
  3. Replace vague words with specific ones.
  4. Put the key information near the beginning.
  5. Ask whether a reader would understand the image without seeing it.
  6. Have someone read the text aloud, or use a screen reader if available.

A description such as Woman in a blue shirt sitting at a wooden desk in a bright room with a plant, notebook, pen, coffee cup, and laptop may be accurate but excessive if the article is about remote-work ergonomics. Remote worker adjusting the height of a laptop on a desk is more focused.

Do not omit meaningful details merely to make alt text short. Concision means removing irrelevant information, not removing the information the image was included to convey.

Handle common image types correctly

Different visuals call for different strategies.

Product images

Name the product and include the model, color, size, or distinguishing feature if it matters. For example: Black insulated stainless-steel bottle with a bamboo lid. Avoid promotional language such as best bottle ever or amazing must-have product.

If the image is a link to a product page, the alt text should identify the linked destination or product. Do not repeat nearby button text unnecessarily.

Screenshots

Describe the screen, application, and action or result that matters. If a screenshot demonstrates where to click, include the control and its location: WordPress editor showing the Alt Text field beneath the image settings panel.

Do not attempt to reproduce every label in a complex interface. If the exact text is essential, provide it in the article as ordinary, selectable text as well.

Charts and graphs

State the chart type, subject, overall trend, and notable comparison: Bar chart comparing monthly expenses; housing is the largest category, followed by transportation and food.

A chart’s alt text is usually not a substitute for all underlying data. Provide a data table or written explanation when readers need exact values, multiple series, or detailed comparisons.

Infographics and diagrams

Summarize the main relationship or sequence. For example: Three-step diagram showing research, drafting, and editing in a repeating content workflow.

If the infographic contains essential facts, include those facts in nearby HTML text or a linked accessible transcript. A long image description alone may be difficult to navigate and difficult to update.

Maps

Identify the area and the meaningful route, boundary, or location: Map of central Boston highlighting the walking route from South Station to Boston Common.

If readers need turn-by-turn directions or exact geographic data, provide those separately in text.

Text inside images

Transcribe short, important text when it is not available elsewhere. If the image contains a long quotation, recipe, instruction list, or announcement, repeat the content as regular text so it can be searched, resized, translated, and copied.

Know when to use empty alt text

Decorative images should usually have an empty alt attribute: alt="". This tells assistive technology to skip the image instead of announcing an unhelpful file name or irrelevant description.

An image may be decorative when it is:

  • A background texture or visual divider
  • A repeated ornament beside a heading
  • A stock photo that adds mood but no information
  • An icon next to text that already provides the same meaning
  • A spacer or layout element

Empty alt text is different from omitting the alt attribute entirely. In HTML, use alt="" for a decorative image. Omitting the attribute may cause some assistive technologies to announce the file name, URL, or other confusing information.

If an image is clickable, it is not merely decorative from an interaction standpoint. Describe the destination or action. For example, an icon link to an RSS feed might use alt="Subscribe to RSS feed", while an icon placed beside visible text reading “Subscribe” can often use empty alt text if the link’s accessible name is already provided by the text.

Avoid keyword stuffing and misleading SEO tactics

Search engines can use image context, filenames, captions, headings, and surrounding text, but alt text is primarily an accessibility feature. Adding a list of repeated keywords makes the description unnatural and can make a page harder to use.

Avoid descriptions like:

best budget laptops cheap laptops affordable laptops for students laptop deals

Use a meaningful description instead:

Silver 14-inch laptop displaying a student budget spreadsheet

Mention a target keyword only when it accurately describes the image and helps explain its purpose. Do not claim that a product is “eco-friendly,” “luxury,” or “award-winning” based only on its appearance. Keep claims in the visible copy where they can be supported and evaluated.

Add alt text in common publishing tools

Most blogging systems provide an Alt Text field in the media library or image block. Enter the description there and save the image or post. Do not rely solely on the image filename, caption, or title field; these serve different purposes.

In HTML, a meaningful image looks like this:

<img src="desk-workflow.jpg" alt="Writer organizing blog topics on a notebook beside a laptop">

A decorative image should look like this:

<img src="decorative-line.svg" alt="">

When using Markdown, the equivalent syntax is:

![Writer organizing blog topics on a notebook beside a laptop](desk-workflow.jpg)

If your content management system automatically inserts a filename into the alt field, replace it manually. Names such as IMG_4821.jpg are not useful descriptions.

Troubleshoot common alt-text problems

The image has a caption. Should the alt text repeat it? Usually not. Use the alt text for information not already supplied by the caption, or keep it concise when the image and caption work together.

The image contains a lot of text. Put the essential message in alt text, then provide the full wording as nearby text or a linked transcript.

The image is both informative and decorative. Describe the informative portion and leave out visual details that only add atmosphere.

The subject is hard to identify. Describe what can be observed without guessing. If the exact object or person is critical, revise the surrounding content so the identity is established in text.

Several similar images appear in a row. Give each image a distinct purpose-based description, or use empty alt text for repeated images when the information is already conveyed elsewhere.

A logo appears in the header. If it links to the home page, use an accessible name such as mcklinky.com home or ensure the adjacent link text already communicates that destination. Do not add unnecessary slogans.

A screen reader announces too much. Shorten duplicated descriptions, remove decorative images from the accessibility tree with empty alt text, and check whether captions or nearby headings repeat the same content.

A final review checklist

Before publishing, check each blog image:

  • Does the alt text explain why the image is present?
  • Is the most important information first?
  • Does it describe visible facts rather than assumptions?
  • Are names, numbers, labels, and colors accurate when relevant?
  • Have you removed keyword stuffing and promotional claims?
  • Is a decorative image marked with an empty alt attribute?
  • Does a complex visual have a nearby text explanation or data alternative?
  • Does the description avoid repeating the caption or surrounding paragraph?
  • Would the article still make sense if the image could not be seen?

Good alt text is not a miniature caption for every pixel. It is a concise bridge between the visual and the reader, shaped by the image’s role in the article. Write the information a reader needs, make that information available in text when it is complex, and treat accessibility as part of the content—not as a final SEO field to fill at random.

Written by

mcklinky.com Editorial Team

Editorial team

Independent editorial coverage of blogging & online community.