How to Write Alt Text for Website Images, With Examples

In this guide, we at Talha Aslan and team walk through the image types we meet most often on business websites. We cover hero images, logos, icons, product photos, team photos, charts and promotional banners, each with its own examples. We already explained the basics and the SEO side in our post what is alt text and how to write it. Here, we focus on the writing itself. In other words, the goal is to help you find the right sentence for every image on your site.

Which question should you ask before you start writing?

One question solves half the job. If this image disappeared, what would the reader miss? When the answer is nothing, the image is probably decorative. If the answer is a fact, a feeling or an action, your description has to fill exactly that gap.

For example, a coffee cup photo on a cafe homepage may only set the mood. In that case, the reader loses nothing without it. On the other hand, the same photo may introduce the new filter coffee on the menu. Then the reader misses the product. Therefore, you write the description for the context, not for the file.

When our team takes over an existing site, we first ask this question for every image. After that, we sort images into three groups:

• Informative images: products, people, charts and screenshots.
• Functional images: linked logos, icon buttons and search icons.
• Decorative images: background patterns, dividers and repeated icons.

As a result, writing stops being a guessing game. Each group follows its own rule, and the sections below spell those rules out.

How does the W3C alt decision tree work, step by step?

The W3C publishes an alt decision tree to make this choice easier. It asks five questions, and each answer leads you to an outcome. On our projects, we follow almost the same order:

1. Does the image contain text? If the same text also sits nearby as real text, use an empty alt. If the text appears nowhere else, put that text in the alt attribute.
2. Is the image inside a link or a button? If so, describe the destination or the action.
3. Does the image add meaning? For a simple photo, a brief sentence works. For a chart or other complex information, also provide the details elsewhere on the page.
4. Is the image purely decorative? If so, use an empty alt.
5. Does none of this fit? Then check the relevant section of the W3C images tutorial.

The order is the most useful part of the tree. The text and link questions come first. So even when a logo carries the brand and acts as a link, the link rule wins.

Why can the same image need two different descriptions?

The W3C ties the informative or decorative label to the reason an author places the image on the page. That means one photo can carry meaning on one page and serve as decoration on another. For that reason, a single description saved once in the media library often gives the wrong result.

Example scenario: an architecture firm uses a photo of a finished villa on its homepage and on a project page. On the homepage, the photo gives a general impression under the heading "Our projects." On the project page, however, the reader wants to study the facade.

• Homepage: "Two story stone villa our studio designed."
• Project page: "South facade of the villa with wide glass panels and a timber pergola."
• Blog post where it only decorates: empty alt.

In short, you describe the job the image does on that page, not the image itself. If your content management system lets you change the description per page, use that flexibility.

What should hero image alt text say?

The large hero image at the top of a homepage usually plays one of two roles. Either it creates an impression, or it simply sits behind the headline. For images that convey an impression or emotion, the W3C suggests that the description name that impression.

For instance, picture a family restaurant. A photo of a smiling family at a table may say "we welcome families." In that case, a short sentence can carry the message: "Three generations of a family eating at a garden table." That way, screen reader users get the same impression.

However, the hero may already hold a large headline and a short pitch. Then the photo only adds atmosphere. In that situation, an empty alt is often the better choice. Otherwise, the reader first hears a long photo description and only then reaches the headline.

For sliders, you judge each slide on its own. If the campaign message lives inside the image file, you need to repeat that message in the description. If the message sits on top as real HTML text, you skip it.

How should you write alt text for a logo?

The logo appears on nearly every page and usually links to the homepage. In its functional images tutorial, the W3C recommends that a linked logo without other link text name the destination. So the word "logo" alone falls short. Readers want to know where the link takes them.

Let us use a made up brand for an example scenario: "Harbor Build." If the logo in the header links home, write "Harbor Build home." If visible link text that says "Harbor Build" sits right next to it, give the logo an empty alt. Otherwise, the reader hears the same link twice.

An unlinked logo in the footer only needs the brand name. Partner and certification logos, on the other hand, carry information. For those, write the organization name and, where it matters, the type of certificate.

• Linked header logo: "Harbor Build home."
• Linked logo with visible text beside it: empty alt.
• Unlinked footer logo: "Harbor Build."
• Certification badge: the certificate name and the issuing body.

What should linked images and image buttons say?

Once an image becomes clickable, its description turns into link text. The W3C suggests a word like "Search" for a magnifying glass button, because the text should state the action. MDN gives a similar example. It recommends "next page" instead of "arrow right."

Social media icons break this rule all the time. Small footer icons often have no description at all, or they simply say "icon." Yet readers need to hear where the link goes, for example "Our Instagram account" or "Our LinkedIn company page."

Also, remember the small icon that marks links opening in a new tab. The W3C suggests that such icons convey the meaning "opens in a new window." That way, nobody meets an unexpected tab switch.

• Cart icon: "My cart."
• Phone icon link: "Call us."
• Hamburger icon: "Open menu."
• Close icon: "Close dialog."

In practice, you ask one question for every clickable image. If this link were plain text, what would it say?

How do you recognize a decorative image?

A decorative image changes nothing about the information on the page when you remove it. Background patterns, section dividers, corner flourishes and icons that repeat nearby text all belong here. WCAG success criterion 1.1.1 asks that decoration and pure formatting reach assistive technology in a form it can ignore.

According to MDN, an empty alt signals that the image is not a key part of the content. However, deleting the attribute entirely sends a different signal. MDN notes that when the attribute is missing, some screen readers may announce the file name instead. To spare readers a sound like "IMG 4821 jpg," you always include the attribute, even when you leave it empty.

We often run a simple test. We hide the image and read the page again. If the meaning stays intact, the image is decoration. If a feeling or a brand impression disappears, though, the image moves to the informative group.

Moreover, images that CSS places as backgrounds never reach screen readers in the first place. For a purely decorative pattern, a CSS background is therefore a clean solution. Making this call during design is far easier than fixing hundreds of images later.

What do you do with images that contain text?

Promotional banners, discount strips and graphics borrowed from social media often bake the text into the image. The first question of the decision tree covers exactly this case. If the text appears nowhere else on the page, you copy that text into the description.

Example scenario: a furniture store places a banner that reads "End of season sale on all sofas" on its homepage. That wording exists only inside the image. Therefore, the description should also read "End of season sale on all sofas." If the banner links to a campaign page, you add the destination: "End of season sofa sale, view the campaign."

That said, the best fix is often to pull the text out of the image. Real HTML text stays sharp when users zoom, works with translation tools and reaches search engines directly. For this reason, our design team prefers to place campaign copy over the image as code.

Screenshots of quotes or customer reviews work a little differently. If you place the full review right below the image as real text, the image can take an empty alt. As a result, the reader does not hear the same sentence twice.

What does good alt text look like for product photos?

On an online store, product photos carry more information than any other image. Shoppers often decide to buy based on these photos alone. The product name already sits in the page title, so a strong description shows what this particular photo adds. Angle, color, texture or a moment of use are typical examples.

Google places good and bad examples side by side in its image SEO best practices. A missing description is bad, and so is a string of stuffed keywords. "Puppy" is better, while "Dalmatian puppy playing fetch" is the best example. In other words, useful detail makes the description stronger.

Here are examples for a made up product gallery:

• Main photo: "Navy linen shirt, front view."
• Second photo: "Mother of pearl buttons and stitching detail."
• Third photo: "Model wearing the shirt, side view."
• Color swatch thumbnail: "Khaki color option."

As a result, a shopper moving through the gallery understands why each image exists. To keep the copy consistent, see our guide on SEO friendly product descriptions. We also cover file size and formats in our post on optimizing images for speed and SEO.

What should you write for team and founder photos?

Team photos on an About page build trust. Because of that, readers want to know who they are looking at. In most cases, the person's name and role are enough.

Watch for repetition here, too. When the name and title already appear under the photo as real text, repeating them adds nothing. In that case, the description can say what the person is doing, or you can leave it empty.

Consider an example scenario with a made up law firm:

• Photo without a visible name: "Founding partner Ellen Kay in her office."
• Card with name and title below: empty alt, or "Ellen Kay meeting a client."
• Group photo: "Our firm's team in the meeting room."

On the other hand, avoid long notes about physical traits, age or appearance. That detail rarely serves the purpose of the page. In short, "who" and "doing what" usually cover a team photo.

How should you handle service icons and feature cards?

Corporate sites often show small icons next to headings such as "Fast delivery" or "Round the clock support." Most of these icons simply repeat the heading in visual form. According to the decision tree, an image that repeats nearby real text gets an empty alt.

What if the icon stands alone, though? For example, a green check mark in a pricing table may mean "included in this plan." Then the icon carries information. Its description should state that meaning, such as "Included." Otherwise, a screen reader user misses half the table.

The same principle applies to SVG icon sets. You hide decorative SVG icons from assistive technology and give informative ones an accessible name. Marking this split in the design file cuts mistakes during development by a wide margin.

Our team uses a short rule. If a word next to the icon gives the same meaning, the icon stays silent. If no such word exists, the icon speaks. This rule lets you sort hundreds of card icons quickly.

What should you write for charts, infographics and screenshots?

For complex images, one short sentence cannot carry all the information. In its complex images tutorial, the W3C recommends a two part approach. A short description identifies the image, and a long description gives the essential information as text.

Example scenario: an energy consultancy publishes a bar chart of monthly electricity use. The short description could read "Monthly electricity use chart, details in the table below." Right under the chart, a table or a short summary paragraph presents the same data.

The W3C also advises making the long description available to everyone, for instance as part of the main content. You can tie the image and its explanation together with figure and figcaption as well. We discuss clearer chart presentation in our post on data visualization and website engagement.

Screenshots follow a similar path. When a software guide shows a screenshot of one step, the description states that step: "Settings menu with the notifications section open." That way, readers who cannot see the screenshot can still follow along.

What do sample descriptions look like by image type?

The table below sums up the decisions in this guide at a glance. All examples rely on made up brands and serve as example scenarios.

You can use the table as a checking tool. First, place the image in the right row. Then build the sentence from the pattern in that row.

How do you turn weak alt text into strong alt text?

When you fix an existing site, rewriting what is already there beats starting from scratch. Our team follows three steps for this. First, we cut filler words. Next, we add context. Finally, we remove repetition.

Here are a few sample rewrites:

• Instead of "image1," write "Bosphorus view from the rooftop terrace."
• Instead of "This image shows a woman using a computer," write "Our accountant reviewing a client file."
• Instead of "web design web design agency web design company," write "Corporate site design shown on mobile and desktop."
• Instead of "click," write "See campaign details."

The first rewrite fixes a meaningless file name. The second drops the "this image shows" pattern that MDN warns against and puts the purpose first. Next, the third one removes keyword stuffing that Google may treat as spam. The fourth gives a clickable image a real destination.

While you rewrite, one question per image is enough. Would this sentence help the reader if it sat on the page as plain text? If yes, you are on the right track.

Which words should you leave out of alt text?

Some words add nothing and only lengthen listening time. Screen readers usually announce that an element is an image already. Therefore, you do not need words like "image," "picture" or "photo of" at the start.

MDN also states that a description should not describe the presence of the image or its file name. Instead of writing "image," you describe the content. On the other hand, when the medium itself matters, such as an oil painting or a map, you can name it.

Other patterns we avoid include:

• Keyword lists and search terms separated by commas.
• Vague link phrases such as "click here" or "this."
• An exact copy of the caption or heading right next to the image.
• Copyright notes, shoot dates and photographer names that do not help the reader.

In short, every word should earn its place. A keyword belongs only when it describes the image naturally. Google also advises using keywords appropriately and never stuffing them.

What happens when a caption and the alt attribute overlap?

A caption, or figcaption, is visible text that sighted and non sighted readers both get. The alt attribute, in contrast, replaces the image. If both carry the same sentence, a screen reader user hears the same information twice in a row.

The W3C notes that when surrounding text already explains what an image shows, the image may count as redundant and therefore decorative. In that case, an empty alt makes sense. However, if the caption only adds context, the alt attribute still describes the content.

Example scenario: on a travel blog, the caption says "The trail we started at 7 a.m." The alt attribute could then read "Narrow dirt path through a pine forest." As a result, the two texts complement each other instead of repeating.

The title attribute hides a similar trap. MDN says title is not a substitute for alt and advises against putting the same value in both. Some screen readers announce both values. Also, touch screen users often never see the title tooltip.

How do you handle galleries, maps and form images?

Galleries hold many photos of the same subject. Giving all of them the same description is the most common mistake. Instead, describe what sets each photo apart: angle, room, detail or moment.

For example, a hotel gallery might have ten photos that all say "Sea view room." Split them instead: "Sea view from the room's balcony," "Double bed and work desk," "Bathroom with walk in shower." That way, readers can actually explore the gallery.

Map images usually carry an address. If you use a static map image, the description should state the address or location. Also, write the address on the page as real text. An address that lives only inside an image cannot be copied and helps few readers.

Image buttons in forms follow the link rule. If an image button reads "Send," its description should also say "Send." WCAG 1.1.1 also asks CAPTCHA images to describe their purpose in text and to offer alternatives that use different senses.

Who should write alt text during a web design project?

On most projects, image descriptions get left until the very end, and a developer fills them in under time pressure. Yet the right sentence comes from the person who knows why each image made the cut. That is why we treat descriptions as part of the content plan.

The workflow runs like this. The designer marks each image's role in the design file: information, function or decoration. Then the content writer drafts sentences for informative and functional images. Finally, the developer implements decorative images with an empty value or as a CSS background. As a result, the descriptions are ready on launch day.

If you want this workflow built into your site from day one, our web design service plans image roles and descriptions during the design phase. For the broader accessibility framework, our post on web accessibility and WCAG standards is a good starting point.

Descriptions on social media posts are a different context. We cover that topic separately in our post on social media accessibility.

How do you check alt text before you publish?

A short review list before launch cuts the cleanup work afterward. Our team uses the checklist below for every page:

1. Does every image have an alt attribute, even decorative ones?
2. Do linked images and image buttons state the destination or the action?
3. Does text inside images appear in the description or as real text on the page?
4. Is any description an exact copy of the nearby heading or caption?
5. Does each photo in a gallery say something different?
6. Do charts and infographics have their details on the page as text or a table?
7. Did you remove filler words like "image" and any keyword stuffing?
8. Are file names meaningful, with no automatic names like "IMG 0023" left?

After that, we recommend listening to the page once with a screen reader. The screen readers built into phones and computers do the job. For a quick look at your site's overall technical health, you can also try our SEO checker.

How do you bring this system to your own site?

On a new site, applying these rules from the start costs almost nothing extra. On an existing site, it makes sense to begin with the pages that get the most visits. The homepage, product or service pages and the contact page come first.

We suggest this order. First, fix linked images, because they affect navigation directly. Next, handle banners that contain text. Finally, move on to product, team and gallery photos. This order closes the biggest access gaps in the shortest time.

If you also want stronger image visibility in search, take a look at IPTC image metadata. It complements good descriptions without replacing them.

If you want to rebuild or redesign your site around this system, share your project details on our web design page and request a quote. That way, image planning, descriptions and accessibility checks become part of the project from the very first step.