What Is Alt Text? What It Does and How to Write It

What is alt text and why does it matter?

Alt text (alternative text) is a short written description you place in the alt attribute of an image tag. It shows when the image fails to load, a screen reader reads it aloud to blind visitors, and search engines use it to understand what the image shows.

In this guide, we cover alt text from both sides: accessibility and image SEO. In our audits, the most common problem is simple. Teams either leave the attribute empty or turn it into a keyword dump, and neither helps anyone.

For example, imagine a product page where the main photo has no description. A blind shopper never learns what the jacket looks like. A search crawler also has to guess the image topic from the surrounding text alone.

Writing a good description takes a few seconds per image. The real skill is choosing the right approach for each image type, because informative images, decorative images, linked images and charts all follow different rules. We walk through each one below.

What does alt text look like in HTML?

The description lives in an attribute of the image tag. For example, picture a line like <img src="black-leather-jacket.jpg" alt="Black leather biker jacket, front view">. The text inside the quotes is the alt text value.

If the browser cannot load the file, it shows this text instead. A screen reader skips the picture and reads the text aloud. So the attribute works as a stand in for the image when someone cannot see it.

There is also a big difference between a missing attribute and an empty one. In practice, when the attribute is missing, some screen readers fall back to reading the file name. An empty value (alt="") tells the reader the image is decorative, so it skips the image quietly.

• Filled attribute: the image carries information, and the reader speaks the description.
• Empty attribute: the image is decoration, and the reader skips it.
• Missing attribute: an unclear state, which audit tools report as an error.

Why is alt text important for accessibility?

Accessibility is where alt text started. So people who are blind or have low vision listen to pages through a screen reader. The reader speaks the description in place of the image, so without it they miss part of the content.

The Web Content Accessibility Guidelines (WCAG) cover this under Success Criterion 1.1.1, Non-text Content. It asks you to provide a text alternative for non-text content. Purely decorative images should be implemented so that assistive technology can ignore them. You can read the details in the W3C explanation of Non-text Content.

Other people benefit too. Also, visitors on slow connections, users who turn images off, and voice assistants all rely on descriptions. As a result, alternative text improves the experience for a much wider group than most teams expect.

If you want the bigger picture, read our guide on web accessibility and WCAG standards. You can also see how we approach the topic on our own site in the accessibility statement.

How does alt text help SEO?

Google uses alt text together with computer vision algorithms and the page content to understand an image. The Google Search Central image SEO guide says so directly. So alt text is not a ranking button on its own; it is a signal that places the image in context.

The same guide warns that stuffing the attribute with keywords creates a poor user experience and may cause the site to be seen as spam. Therefore, the goal is to use the right word naturally, inside a sentence that actually describes the picture.

Alt text also supports Google Images traffic. In topics where people search visually, such as products, recipes and places, a well understood image has a better chance to appear. We cannot promise speed or traffic volume; we only say that you are laying the right groundwork.

Finally, when an image works as a link, the description acts like anchor text for that link. That gives your internal linking a small but real benefit.

How do you write good alt text?

Good alt text sounds like you describing the picture to someone over the phone. First, ask what job the image does on the page. Then, write the most important information for that job in a short phrase.

1. Describe the visible subject with concrete nouns and actions.
2. Add the detail that matters in context, such as colour, model or place.
3. Use the main keyword once, and only if it fits naturally.
4. Keep the sentence short and end it with a full stop.
5. Skip information that the nearby text already states.

For example, "two colleagues reviewing an analytics dashboard on a laptop" beats a one word label like "analytics". It gives both the blind reader and the search engine a concrete scene.

Also avoid starting with "image of" or "picture of". Screen readers already announce an image, so you only need to describe the content.

What do good and bad alt text examples look like?

The table below compares common mistakes with better versions for the same image. Note that all examples are invented sample cases, not data from a real client.

The pattern is clear. In practice, good alt text is short, concrete and tied to context, while bad alt text looks like a file name or a keyword list.

How long should alt text be?

Google does not publish an official character limit for alt text. In practice, we keep it to one short sentence, roughly under 100 to 125 characters. This is a starting range from field experience, not a rule, and it is not a guarantee.

Why keep it short? A screen reader speaks the whole string without a pause, so a long description tires the listener. Besides, a very long value starts to look like keyword stuffing.

Even so, shorter is not always better. If a product feature only shows up in the photo, a slightly longer description makes sense. A useful test is this: can someone who cannot see the image get the same information from the page?

For complex images that need a long explanation, keep the description short and put the detail in the page text or a caption. We show that approach with charts in a later section.

Should you add alt text to decorative images?

No, you should not describe them, but you should keep the attribute and leave it empty (alt=""). A decorative image adds no meaning. It is a divider, a pattern, a spacer photo or a background flourish.

An empty value is the standard way to tell a screen reader to skip the image. Also, the W3C image decision tree gives the same advice for decorative images. You can review it on the W3C images decision tree page.

Without this distinction, visitors would hear meaningless phrases such as "decorative line, blue gradient" all through the page. In short, the goal is not to describe every image, but to make the right call for every image.

If you cannot decide whether an image is decoration, try this test. Then remove the image from the page and ask whether the content loses meaning. If it does, write a description; if it does not, leave the value empty.

What should alt text say for logos and linked images?

When an image is clickable, the alternative text should describe where the link goes, not what the picture looks like. A logo that links home should say "Company name, home page" instead of "blue logo".

The same logic applies to functional images such as social icons, a cart icon or a PDF download button. The visitor cares about what the button does, not how it looks.

• Logo link: the company name and the destination.
• Cart icon: "View cart".
• Social icon: the platform name, for example "Our Instagram profile".
• PDF icon: "Download the price list as PDF".

If visible text next to the image already says the same thing, you can leave the image description empty. That way, the screen reader does not read the same phrase twice.

How do you write alt text for charts and complex images?

A chart is too rich for a single short description. For that reason, we use two layers: a brief summary in the alt attribute and the full detail in the page text or a table.

For example, a monthly visitors chart could carry "Line chart showing visitor numbers rising steadily over six months". Right below it, you add the monthly numbers in a paragraph or table. As a result, both screen reader users and search engines can reach the same data as text.

If the chart makes a claim, state the claim in a sentence first. A picture cannot be quoted in search results, whereas a clear sentence can. This also helps your content get cited in AI assisted search answers.

W3C guidance points in the same direction: separate the short description from the long one. So placing the long description in a visible section is the safest option.

What should alt text say for images that contain text?

If the image contains words, the alt text should repeat those words. For banners, promo graphics and screenshots, you carry the written message into the description so that nobody misses the offer.

Whenever possible, use real HTML text instead of text baked into an image. Besides, embedded text causes trouble with resizing, translation and readability. Search engines also read plain text more reliably.

For instance, a banner that says "Summer sale: 20% off selected items" should have exactly that sentence as its description. However, do not leave the sale conditions only inside the graphic; write them in the page text too.

This matters most for pricing or legal details. If you only show them in an image, some visitors never receive them at all.

How do you write alt text for ecommerce product images?

In an online store, alt text supports accessibility, Google Images and product discovery at once. So building a pattern that combines product name, a distinguishing feature and the image angle is the most practical way to manage hundreds of products consistently.

Our suggested pattern is product name, colour or model, and the angle or usage context. "Women's black leather biker jacket, back view" fits it. However, add the brand name only when it truly distinguishes the item.

Repeating the product title word for word is not enough. If each image shows something different, each description should differ too. Otherwise you end up with ten identical descriptions for one product.

For the page as a whole, see our ecommerce product page guide, and for visibility beyond the page, our ecommerce SEO guide for product and category pages. If you want hands on help, look at our ecommerce consulting service.

How do you separate alt text for variants and gallery images?

When a product has colour, size and angle variants, each image description should highlight different information. Otherwise the gallery turns into the same sentence repeated for a screen reader user.

The products in this table are a made up sample. The point is that each image tells a different part of the story.

For colour swatch images, write the colour name so the customer knows which option they are viewing. With hundreds of variants, build a template and automate only the changing fields, such as colour and angle.

What is the difference between alt text, the title attribute and file names?

These three fields do different jobs. First, the alt attribute replaces the image for people who cannot see it. The title attribute is an extra tooltip on hover. The file name is simply how the image is stored on the server.

• Alt: the primary field for accessibility and image understanding, and every informative image needs it.
• Title: optional, inconsistent on touch devices and in screen readers, and never a replacement for alt.
• File name: an extra hint for Google, so keep it short and descriptive.

Google's image guide also recommends descriptive file names. So choose "black-leather-jacket-front.jpg" instead of "IMG_4821.jpg". Your description does not need to repeat the file name; the two complement each other.

Image size and format are separate topics. We explain how to shrink files in our guide on how to optimize images for website speed and SEO.

Which alt text mistakes do teams make most often?

The same mistakes show up in almost every audit we run. So knowing them makes fixing them faster.

• Forgetting the attribute completely.
• Leaving the file name as the description, such as "DSC0045.jpg".
• Repeating one keyword on every image.
• Starting with "image of" or "photo of".
• Writing long descriptions for decorative images.
• Describing the looks of a clickable image instead of its destination.
• Skipping the words that appear inside a graphic.

Another frequent mistake is copying the caption into the alt attribute word for word. The caption is already read aloud, so the screen reader says the same thing twice. In that case, shorten the description or add a different detail.

Each of these looks minor. Spread across hundreds of pages, however, they create a serious loss for accessibility and image search. In bulk catalog imports the errors multiply at once, so plan the alt field in your import template from the start.

How do you audit alt text in bulk?

Manual checks stop working as a site grows. First, crawl the site with a tool and list every image with a missing or empty attribute. Then, sort the list by importance: product images, home page images, and finally blog images.

For a quick first look, you can use our SEO checker. For a deeper crawl, use a crawler based SEO tool or an accessibility checker.

1. Collect the images that lack the attribute.
2. Separate decorative images and give them an empty value.
3. Write rule based descriptions for informative images.
4. Test key pages by hand with a screen reader or the keyboard.

Do not skip the last step. In practice, tools can tell you whether a description exists, but only a person can judge whether it makes sense.

Is it right to generate alt text with AI?

AI tools speed up the work, but a human must review the output. A model can recognise objects in a photo, yet it may not know the page goal, the product name or the campaign context.

A safe method is to use the tool for a first draft. Then, adjust the result to your brand terminology and pattern. This way you gain consistency across thousands of images and still catch wrong labels.

Product details carry the highest risk. For example, a model might call a leather jacket a "fabric jacket". That small error hurts customer trust and accessibility quality alike.

In short, AI is a helper, not the decision maker. Before publishing, review a sample batch by hand, because that shows bulk errors early.

How do you add alt text in WordPress and other platforms?

In most content management systems, a field called "alt text" or "alternative text" appears when you upload an image to the media library. Whatever you type there becomes the alt attribute in the page markup.

The same field appears when you insert an image into a post. In some platforms, the library value behaves differently from the post level value. So create a test page and verify the actual output in your own setup.

On custom built sites, review the template with your developer. Also, make sure the product listing template builds the attribute from the product name, and check that every image does not receive the same text.

If you are building a new site, our web design service sets up accessible, SEO friendly templates from the start. For an existing site with gaps, our SEO consulting service can run the audit.

Does alt text differ by page type?

Yes, the page type changes both tone and level of detail. For example, on a product page, the distinguishing feature leads. On a blog post, the scene that supports the topic leads. On a home page, images that carry the brand message matter most.

• Product page: name, colour, angle and usage context.
• Blog post: the example, scene or data the image shows.
• Category page: a short phrase that names the category cover.
• Home page: brand name, service and the job of the image.

On category pages, there is often a single cover image. Describe the category rather than listing products, so visitors understand where they are.

If the same image appears on two pages, the description can change too. After all, alternative text depends on context, and an image has no single correct description.

How do you manage alt text on multilingual sites?

On a multilingual site, the description must use the language of each page. If an English page keeps Turkish or German alt text, the screen reader mispronounces it and the visitor cannot follow.

The easiest fix is to include description fields in your translation workflow. So send the translator the image descriptions along with the body copy. You do not have to translate file names, although descriptive ones still help.

Also avoid translating keywords word for word. Pick the phrases that people actually use in the target language. For the wider framework, read our multilingual website SEO guide.

When the page language attribute is correct, screen readers choose the right voice. So check the page language and the description language together.

How do you measure the result of alt text work?

You can measure the effect in Google Search Console by filtering the search type. In the Performance report, choose the "Image" search type and compare clicks and impressions with the previous period.

Keep a few points in mind. After a change, Google needs time to recrawl images, and we cannot give an exact number of days. Therefore, do not base decisions on short term swings.

• Compare periods of at least several weeks.
• Track the pages with improved images as a separate group.
• Account for seasonal demand, such as gift searches before the holidays.
• Verify the accessibility gain with screen reader tests, not with traffic.

The accessibility benefit rarely turns into a number. Instead, you see it when you listen to a page with a screen reader and still understand the product.

Which tone and wording should alt text use?

Use plain, neutral and descriptive language. Instead, do not write marketing slogans. Words such as "amazing", "unique" or "best" do not describe the image; they only inflate the text.

For example, write "Black leather jacket with wide lapels and a metal zipper" instead of "Unique quality stylish jacket". The second version tells a blind visitor nothing real.

Let your brand voice live in the page copy instead. That said, you can still use the brand name when it matters, such as on a logo link or when the brand is a distinguishing part of the product.

Avoid emoji, special characters and capital letter emphasis as well. Also, screen readers may read them one by one and break the sentence. A plain sentence always works better.

How do file names, size and alt text work together?

Alt text alone is not enough. The file name, the file size and the loading method belong to the same system. Google's image guide recommends descriptive file names and fast loading images.

1. Write short, descriptive file names and separate the words with hyphens.
2. Resize the image close to the size it shows on the page.
3. Choose a suitable modern format and test compression without visible quality loss.
4. Use lazy loading for images below the fold.
5. Finally, add a description to every informative image.

The reasoning is simple: an image that loads fast and is described well satisfies both the visitor and the search engine. Page speed also supports the overall experience in image results.

For a full walkthrough, see our guide on optimizing images for speed and SEO. Our free image resizer and image converter help with testing.

What checklist should you use before publishing alt text?

The short list below summarizes the check our team runs for every image before it goes live.

1. Does the image carry information or is it decoration? If decoration, use alt="".
2. Is it clickable? If yes, describe the destination.
3. Does it contain text? If yes, carry the text into the description.
4. Is it complex? Write a brief summary and put the detail in the page text.
5. Is the sentence short, concrete and free of "image of"?
6. Does the keyword sound natural, and does it appear only once?
7. Is the file name descriptive?

Check your lazy loading settings as well. Our guide on lazy loading and SEO explains how to do that safely.

For image strategy in general, ecommerce visual language and UX makes a good companion read. To sum up, alt text looks like a small detail, but handled well it delivers a steady gain for accessibility, SEO and conversion.