HTML Alt Text Best Practices for Accessible Images

Alt text helps people understand images when they cannot see them, and it also improves searchability and robustness across browsers, assistive technologies, and slow connections. In HTML, good alternative text is one of the most important accessibility habits you can build.

Quick answer: Write alt text that conveys the image’s purpose or meaning in context, not every visual detail. Use an empty alt="" for decorative images, and never leave alt out on meaningful images.

Difficulty: Beginner

You'll understand this better if you know: basic HTML image syntax, how screen readers read page content, and the difference between informative and decorative images.

1. What Is Alt Text?

Alt text, short for alternative text, is the text value of an image’s alt attribute. It gives an image a text-based alternative when the image cannot be seen or loaded.

In HTML, alt text serves several purposes:

It is read by screen readers for users who cannot see the image.
It appears when an image fails to load.
It helps search engines and other tools understand the image’s role.
It clarifies the meaning of an image in context, not just its appearance.

Alt text is not the same as a caption. A caption is visible text that appears near the image, while alt text is hidden from sighted users in normal browsing but available to assistive technology.

2. Why Alt Text Matters

Images often carry important information: a product photo, a chart, an icon, or a photo that supports the surrounding article. If the image is unavailable, the page should still make sense.

Good alt text improves accessibility by letting screen reader users get the same essential information other users get from the image. It also makes pages more resilient in real-world conditions such as slow networks, blocked images, or text-only browsing modes.

For many websites, alt text is also part of legal and policy compliance around accessible content. But even beyond compliance, it makes pages clearer for everyone.

3. Basic Syntax or Core Idea

The core pattern is simple: put the alternative text in the alt attribute on an img element.

Minimal example

This example shows the basic structure for an informative image:

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

The src attribute points to the image file, and the alt attribute provides the text equivalent. If the image cannot be displayed, the alt text becomes the fallback description.

Empty alt for decorative images

Some images do not add information, such as background flourishes or purely decorative icons. In those cases, use an empty alt attribute:

<img src="ornament.svg" alt="">

This tells assistive technologies to skip the image instead of reading a noisy or meaningless description.

4. Step-by-Step Examples

Example 1: Product image on an e-commerce page

A product photo should describe the product clearly, but it does not need to describe every pixel. Focus on what a shopper needs to know.

<img src="red-running-shoes.jpg" alt="Red running shoes with white soles">

This works because the alt text identifies the item and its most relevant visual trait, which helps users decide whether the image matters to them.

Example 2: Informative chart

For a chart, the alt text should summarize the chart’s main message, not attempt to reproduce every data point. Detailed data can live in nearby text or a table.

<img src="sales-chart.png" alt="Line chart showing sales rising steadily from January to June">

The alt text gives the takeaway in one sentence, which is usually what a screen reader user needs first.

Example 3: Decorative icon in a button

If an icon is purely decorative and the button already has visible text, the icon should usually have empty alt text.

<button type="button">
  <img src="search-icon.svg" alt="">
  Search
</button>

The button text already tells the user what the control does, so the icon does not need its own spoken label.

Example 4: Functional image as a link

When an image is the only thing inside a link, the alt text should describe the destination or action.

<a href="/home">
  <img src="logo.svg" alt="Home">
</a>

In this case, the image acts as a link, so the alt text should communicate where the link goes. For a logo link to the homepage, “Home” is a concise and useful choice.

5. Practical Use Cases

Alt text is useful anywhere an image contributes meaning. Common situations include:

Product images in stores and catalogs.
Article illustrations that add context to a story.
Charts, graphs, and infographics with important data.
Logos that act as links or identify a brand.
Buttons or controls that use images instead of visible text.
Photos in portfolios, case studies, and reports.

In each case, ask: what would a user lose if they could not see this image? Your alt text should answer that question as directly as possible.

6. Common Mistakes

Mistake 1: Leaving out the alt attribute

Many beginners assume the browser or screen reader can infer the meaning of an image without alt text. That is not reliable for meaningful images.

Problem: If the alt attribute is missing on an informative image, assistive technology may announce only the file name or skip the image in a way that hides important content.

<img src="invoice-summary.png">

Fix: Add descriptive alt text that explains the image’s purpose in context.

<img src="invoice-summary.png" alt="Invoice summary showing a total due of $240">

The corrected version works because it provides a usable text alternative instead of leaving the meaning ambiguous.

Mistake 2: Stuffing alt text with every visible detail

Alt text should be concise and useful. Over-describing an image can make screen reader output harder to follow.

Problem: This alt text tries to describe every object in the picture, which makes it long and distracting instead of helpful.

<img src="conference-room.jpg" alt="A conference room with six chairs, a whiteboard, three laptops, two water bottles, a window, a clock showing 2:15, and a plant in the corner">

Fix: Focus on the information the user actually needs from the image.

<img src="conference-room.jpg" alt="Conference room prepared for a team meeting">

The shorter version works because it communicates the image’s purpose instead of cataloging every detail.

Mistake 3: Using empty alt for meaningful content

Empty alt is only for decorative or redundant images. If the image matters, empty alt hides important information from assistive technology.

Problem: This image appears to show the main speaker of an event, so an empty alt attribute removes information a user may need.

<img src="keynote-speaker.jpg" alt="">

Fix: Replace the empty alt with text that describes the speaker or the image’s role.

<img src="keynote-speaker.jpg" alt="Keynote speaker presenting at the conference">

The corrected version works because it preserves meaningful content instead of treating the image as decoration.

7. Best Practices

1. Write alt text for meaning, not appearance alone

Describe what the image means in context, especially if the surrounding text depends on it. A useful alt string often answers “What information does this image add?” rather than “What does it look like?”

<img src="warning-sign.svg" alt="Warning: Wet floor">

This is better than describing color and shape alone because it communicates the warning itself.

2. Keep decorative images silent

If an image does not add information, use alt="" so it is skipped by assistive technology.

<img src="corner-border.png" alt="">

This avoids unnecessary noise and helps screen reader users move through the page faster.

3. Be concise, but not vague

Good alt text usually fits in one short sentence or phrase. However, it should still be specific enough to identify the image’s role.

<img src="dashboard-snapshot.png" alt="Dashboard showing revenue and sign-up trends">

This is concise, but it still tells the user what the image communicates.

8. Limitations and Edge Cases

Alt text cannot fully replace a complex chart or infographic. If the image contains detailed data, provide a text summary or table nearby.
Not every image needs a description. Decorative images should use an empty alt attribute so they are ignored.
Brand logos often need context. A logo that links to the homepage may use the brand name or “Home,” depending on the surrounding text.
If the same information is already in nearby text, alt text can be short or empty if the image is truly redundant.
For complex illustrations, alt text should capture the main point, while longer explanations belong in surrounding content, captions, or linked details.

A useful test: if you removed the image, would the page still communicate the same idea? If not, the image probably needs meaningful alt text or supporting text nearby.

9. Practical Mini Project

Here is a small, complete example of an accessible article card that uses alt text correctly for an informative image and empty alt for a decorative icon.

<article>
  <img src="city-park.jpg" alt="People walking through a city park in spring">
  <h2>Spring Events in the City Park</h2>
  <p>Join guided walks, family activities, and outdoor workshops every weekend this month.</p>
  <a href="/events/spring-park">
    <img src="arrow-icon.svg" alt="">
    Read event details
  </a>
</article>

In this example, the main photo gets descriptive alt text because it supports the story, while the arrow icon is decorative because the link text already explains the action. The page remains understandable even if the image does not load or a screen reader user navigates it.

10. Key Points

Alt text is the text alternative for an image’s meaning.
Use meaningful alt text for informative or functional images.
Use empty alt text for decorative or redundant images.
Keep alt text concise, specific, and focused on context.
Complex images often need supporting text in addition to alt text.

11. Practice Exercise

Write alt text for a news photo, a product photo, and a decorative border image.
Decide which images should use meaningful alt text and which should use alt="".
Make sure each description matches the image’s role on the page, not just its appearance.

Expected output: Three img elements: one with descriptive alt text, one with short but specific alt text, and one with an empty alt attribute.

Hint: Ask what information each image adds to the page. If it adds none, it is probably decorative.

<img src="city-council-meeting.jpg" alt="City council members voting on the new housing proposal">
<img src="blue-sneakers.jpg" alt="Blue sneakers with reflective stripes">
<img src="divider-pattern.svg" alt="">

12. Final Summary

Alt text is a small attribute with a big impact. It makes images accessible, helps pages remain understandable when visuals are unavailable, and improves the overall quality of HTML content. The key is to write for meaning: describe what the image communicates, not every visual detail.

When an image is decorative, leave it silent with an empty alt attribute. When it is informative or functional, give it concise text that matches its role in the page. If an image is complex, combine alt text with nearby supporting text so the full meaning is still available.

As you build pages, review every image and ask whether it adds information. That simple habit will help you choose the right alt text almost every time, and it will make your HTML more accessible for everyone.