HTML Alt Text: Always Add Alt Text for Images

Alt text is the short text description inside an image’s alt attribute. It helps people using screen readers understand the image, and it gives browsers a text alternative when an image cannot be displayed.

Quick answer: Use meaningful alt text for informative images, and use an empty alt="" only for purely decorative images. If an image conveys information, the alt text should explain that information clearly and briefly.

1. What Is Alt Text?

Alt text is the alternative text for an image in HTML. It is written in the alt attribute of the img element and describes the image’s purpose or content when the image itself is unavailable.

• It is part of the image element, not separate content.
• It is read by screen readers.
• It appears when the image file fails to load.
• It helps search engines understand image content, but accessibility is the main reason to use it.

For example, an image of a dog playing in snow might use alt text like “Golden retriever playing in fresh snow.”

2. Why Alt Text Matters

Alt text matters because images are not always visible to every user. Some people use assistive technology, some browse with images turned off, and some experience broken image links or slow connections.

Good alt text makes content understandable without depending on the image alone. That is a core accessibility requirement for informative images.

It also improves content quality in practical ways:

• Screen reader users get the same information as sighted users.
• Users still understand broken or blocked images.
• Search engines get a better signal about image relevance.
• Teams reduce accessibility defects before they reach production.

3. Basic Syntax or Core Idea

Alt text is written directly on the img element. The attribute should describe the image’s content or function, not repeat the file name.

Minimal example

This example shows the simplest useful form of an informative image:

<img src="team-photo.jpg" alt="Product team standing in front of the office">

The src attribute points to the image file, and the alt attribute provides a readable description.

Empty alt text for decorative images

If the image adds no information and is only decorative, use an empty alt attribute so assistive technologies can ignore it:

<img src="corner-flourish.svg" alt="">

This tells screen readers that the image does not need to be announced.

4. Step-by-Step Examples

Example 1: Product photo

A product image should tell users what the item is, and often a key visible detail too:

<img src="running-shoe-blue.jpg" alt="Blue running shoe with white sole">

This works because the alt text identifies the product image clearly and briefly.

Example 2: Informative chart image

If a chart is embedded as an image, the alt text should summarize the key message, not list every number:

<img src="sales-chart.png" alt="Sales increased steadily from January to June">

That description gives the main takeaway. If the exact data matters, include the full data in nearby text or an HTML table.

Example 3: Informative icon

Icons used as buttons or links need alt text that describes the action or destination:

<a href="/search">
  <img src="search-icon.svg" alt="Search">
</a>

Here, “Search” tells the user what the icon does, which is more useful than describing the visual shape.

Example 4: Decorative separator

If an image is only decorative, skip it for assistive technology with empty alt text:

<img src="line-divider.png" alt="" aria-hidden="true">

In most cases, the empty alt text is the important part. Use additional accessibility attributes carefully and only when they match the role of the element.

5. Practical Use Cases

• Product pages that need a useful description for each item photo.
• Blog articles with charts, diagrams, screenshots, or illustrated steps.
• Navigation icons such as search, menu, close, or profile.
• Marketing pages with hero images that carry real meaning.
• Documentation pages that include screenshots or callout visuals.

Alt text is especially important when the image is the only source of information for a point on the page.

6. Common Mistakes

Mistake 1: Leaving off the alt attribute

Every informative image should have an alt attribute. Without it, screen readers may announce the file name or ignore the image in ways that leave users confused.

Problem: The image has no text alternative, so users who cannot see it do not get the information it provides.

<img src="conference-speaker.jpg">

Fix: Add a meaningful description that matches the image’s purpose.

<img src="conference-speaker.jpg" alt="Speaker presenting slides at a conference">

The corrected version works because it gives assistive technology a real alternative to the image.

Mistake 2: Writing file names or generic labels

Alt text should describe meaning, not repeat the image file name or use vague phrases like “image” or “photo.”

Problem: A file name or generic label does not explain what the image communicates, so it is not useful to a screen reader user.

<img src="img_2049.jpg" alt="img_2049">

Fix: Write the description a user would actually need.

<img src="img_2049.jpg" alt="Child holding a red kite at the beach">

The fixed version works because it describes the content, not the asset name.

Mistake 3: Adding too much detail

Alt text should be concise. Long, paragraph-like descriptions are hard to listen to and often repeat information better left in nearby text.

Problem: The description tries to say everything at once, which makes the image harder to understand quickly.

<img src="office-team.jpg" alt="A team of 12 people standing in a bright modern office with glass walls, laptops, coffee cups, whiteboard notes, plants, and large windows showing a city skyline">

Fix: Keep the alt text focused on the point of the image.

<img src="office-team.jpg" alt="Product team in a modern office">

The corrected version works because it stays short enough to be read comfortably.

7. Best Practices

Practice 1: Describe the function, not just the appearance

If an image acts like a control or link, the alt text should explain what it does. That helps users understand the page without guessing from the visual shape.

<button type="submit">
  <img src="send-icon.svg" alt="Send form">
</button>

This is better than describing the icon as “paper plane,” because the action matters more than the shape.

Practice 2: Match the amount of detail to the image’s role

A simple decorative image needs little or no alt text, while a content-bearing infographic needs a concise summary plus supporting text nearby.

<img src="timeline.png" alt="Project timeline showing design, development, testing, and launch phases">

This approach keeps alt text focused while still capturing the key message.

Practice 3: Keep nearby text and alt text from repeating each other

If the heading or caption already says everything, the alt text can be shorter. Avoid duplication that makes screen reader output feel repetitive.

<figure>
  <img src="warehouse-map.png" alt="Warehouse layout map">
  <figcaption>Warehouse layout map</figcaption>
</figure>

If the caption already fully explains the image, you may want to make sure the alt text does not simply restate a long caption unnecessarily.

8. Limitations and Edge Cases

• Alt text is not a caption. Captions can add context; alt text must stand in for the image itself.
• Not every image needs a description. Purely decorative images should use alt="" so they are skipped by assistive technology.
• Complex charts and infographics often need more than one sentence of support, but that support usually belongs in nearby text, a table, or a long description, not in a huge alt attribute.
• Text inside an image should usually be avoided, because it is harder to read and translate. If you must use it, include the text meaning in the alt text.
• An image used as a background in CSS is not the same as an HTML image and does not use an alt attribute. If the image is meaningful, it usually should be in HTML instead.

If an image communicates essential information, the safest rule is simple: make sure that same information exists in text somewhere on the page.

9. Practical Mini Project

Here is a small product-card example that uses alt text correctly for both an informative photo and a decorative image.

<article>
  <img src="espresso-machine.jpg" alt="Compact espresso machine with stainless steel finish">
  <h2>Home Espresso Machine</h2>
  <p>Brew café-style espresso at home with a small footprint and easy controls.</p>
  <img src="star-divider.svg" alt="">
</article>

The product photo has descriptive alt text because it matters to the content. The divider image is decorative, so it is hidden from assistive technology with empty alt text.

10. Key Points

• Alt text provides a text alternative for an image.
• Informative images need meaningful alt text.
• Decorative images should usually use empty alt text.
• Good alt text is brief, specific, and helpful.
• Alt text should describe the image’s purpose, not the file name.

11. Practice Exercise

• Write alt text for three images: a product photo, a chart, and a decorative border image.
• Decide which images need meaningful descriptions and which should use empty alt text.
• Keep each description to one short sentence or phrase.

Expected output: The product photo and chart should have informative alt text, while the decorative border image should use alt="".

Hint: Ask what information a user would lose if they could not see each image.

<img src="coffee-mug.jpg" alt="Ceramic coffee mug on a wooden table">
<img src="revenue-chart.png" alt="Revenue rose each quarter this year">
<img src="ornament.svg" alt="">

12. Final Summary

Alt text is one of the simplest and most important accessibility practices in HTML. It makes images understandable to people who cannot see them, helps when images fail to load, and improves the quality of the page’s content structure.

The best rule is straightforward: if the image communicates meaning, write alt text that communicates that meaning clearly. If the image is purely decorative, leave the description empty so assistive technology can skip it. With that habit, your HTML becomes more accessible and more reliable for everyone.

Next, practice reviewing real pages and deciding which images need meaningful alt text, which should be empty, and which need supporting text near the image.