How to Write Helpful Alt Text: Practical Guide | Load8it
Load8it › Learning Centre › Helpful Alt Text
Accessibility & SEO

How to Write Helpful Alt Text

Alternative text gives a text alternative for an image when that alternative is needed. Good alt text is not a bag of keywords and it is not simply a literal inventory of every pixel. Its job depends on what the image is doing in the surrounding page.

What is alt text?

For an HTML image, alternative text is commonly supplied through the alt attribute:

<img src="chart.png" alt="Monthly orders rise from 120 in January to 210 in April">

The wording should communicate the useful information or purpose that a user would otherwise get from the image. Context matters: the same image can require different alternative text in different situations.

Start with the image's purpose

Before writing anything, ask why the image is on the page. Is it providing information, performing a function, reinforcing nearby text, or simply decorating the layout?

Image role What to think about Example approach
Informative What information would be lost without the image? Describe the relevant information concisely.
Functional What action does the linked/button image perform? Describe the action or destination rather than its appearance alone.
Decorative Does it add no information or function? An empty alt attribute may be appropriate in HTML.
Complex Does it contain a chart, diagram or substantial information? Provide a concise alternative plus nearby detailed information when needed.

Informative images

For an informative image, describe what matters in the current context. You usually do not need to mention every background object, colour or visual detail unless those details contribute to the information the page is communicating.

Context: an article comparing image formats shows a screenshot of a transparent logo.
Weak: “image graphic logo picture.”
More useful: “Logo with transparent background exported as PNG.”

Decorative images can be different

If an image is genuinely decorative and contributes no information or function, HTML can use an empty alt attribute:

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

This is different from accidentally omitting accessibility decisions altogether. Whether an image is decorative depends on its role on that page, not simply on whether it looks attractive.

Useful question: if the image disappeared, what information or function would the user lose? That answer often tells you what the text alternative needs to preserve.

Functional images

If an image acts as a control or link, its alternative text should generally communicate the function. For example, if a magnifying-glass image is the only content of a search button, “Search” is more useful than “magnifying glass icon.”

Appearance: printer icon
Function: prints the current document
Useful alternative: “Print document”

A practical alt-text workflow

  1. Read the surrounding content. Understand what the page is already saying.
  2. Identify the image's role. Informative, functional, decorative or complex?
  3. Find the essential information. Ask what would be lost if the image could not be perceived.
  4. Write naturally. Communicate that information without stuffing unrelated search terms.
  5. Avoid unnecessary repetition. If nearby text already provides the exact same information, consider whether repeating it helps.
  6. Check the page in context. Alt text that sounds sensible in isolation can be clumsy when read alongside the surrounding copy.

Common alt-text mistakes

  • Stuffing keywords into the alt attribute for SEO.
  • Writing the filename, such as IMG_4821.jpg, instead of useful information.
  • Describing irrelevant visual details while missing the image's actual purpose.
  • Using identical alt text for different images that communicate different things.
  • Writing “image of” or “picture of” automatically when that wording adds no useful information.
  • Giving a decorative image a long description that creates unnecessary noise.
  • Describing a functional icon only by appearance instead of the action it performs.
Do not use an alt-text generator blindly: a tool can suggest wording, but it may not know why the image appears on your specific page. Review generated text against the real context and correct anything inaccurate or irrelevant.

What about charts and diagrams?

A complex image may communicate more information than fits comfortably into a short alt attribute. The concise alternative should identify the important purpose or takeaway, while the page can provide the underlying data or a fuller explanation nearby when users need access to that detail.

Chart context: a line chart demonstrates a steady increase in monthly orders from January through April.
Concise alternative: “Monthly orders increase from 120 in January to 210 in April.”
Nearby content: a table can provide each month's exact value if those values matter to the reader.

Alt text and SEO

Image alternatives can help search systems understand image context, but accessibility and accurate description should not be sacrificed for keyword repetition. Write for the image's actual role on the page. If a relevant phrase naturally describes the image, it can appear naturally; there is no need to force unrelated terms into the attribute.

Examples in context

Situation Possible useful alternative
Photo showing the result of compressing an image for an article about visible quality “Compressed product photo showing slight detail loss around the text.”
QR code that leads to a downloadable guide, with no equivalent link nearby Describe the destination or purpose and provide an accessible equivalent link in the page.
Decorative glow behind a heading alt="" if implemented as an image and genuinely decorative.
Linked company logo returning to the homepage An alternative identifying the site/home destination can communicate the link's purpose.

Draft alt text with Load8it

Use the Load8it Alt Text helper to create a starting point, then review the suggestion against the image's actual purpose and surrounding content.

Alt Text GeneratorImage Resize & CompressBack to Learning Centre

Alt text FAQs

Should every image have a detailed description?

No. The appropriate alternative depends on the image's purpose. A genuinely decorative image may use an empty alt attribute, while informative or functional images need a useful text alternative.

Should alt text begin with “image of”?

Usually that wording is unnecessary when it adds no information, though context can vary. Concentrate on communicating the image's useful purpose or content.

Can I put SEO keywords in alt text?

Use words that genuinely describe the image in context. Avoid stuffing unrelated or repetitive search terms into the alt attribute.

Can AI or a generator write alt text automatically?

It can suggest wording, but the result still needs human review because the correct alternative depends on the image's role and surrounding page context.