web design

How to write alt text for your website images, by image type

How to write alt text for your business website: examples for team photos, products, logos and charts, which images need none, and a ten-minute check.

You uploaded a team photo, and the editor shows a small box labeled "alt text" with a cursor blinking in it. Somebody told you it matters for accessibility and for Google, but nobody said what to put there, so you type "team" and move on, or you leave it blank and hope. That is the usual spot where owners learn how to write alt text: with a dozen images already live and no rule for any of them. The good news is that one question settles most of it. What does this image do on this page? An image that gives information gets a short description, an image that works as a link gets the destination, and an image that only decorates gets nothing at all. This post shows the pattern for each kind of image a business site has, then gives you a ten-minute check you can run on your home page today.

Key Takeaways

Describe the job, not the pixels

Alt text should carry the information or function the image has on that page, in the fewest words that do it.

Decorative images get empty alt text

Writing alt="" tells a screen reader to skip an image that adds nothing, and it is not the same as leaving the attribute out.

Charts need real text beside them

A short alt summary plus the numbers in a table or paragraph on the page, never a vague phrase like "sales chart."

Alt text is one part of accessibility

It does not guarantee rankings, ADA compliance or protection from a demand letter.

Alt text says what an image does on that page

Alt text is a text alternative for an image, read aloud by a screen reader and used by search engines to understand the page. The W3C Web Accessibility Initiative puts the standard this way: "Images must have text alternatives that describe the information or function represented by them." The rule behind it is WCAG 2.2 Success Criterion 1.1.1, which requires a text alternative for non-text content that serves an equivalent purpose.

The same photo can need different alt text on different pages. A photo of a bakery counter is informative on a page about your shop, and it is decoration on a page where the text already describes it. So, you decide per image and per page, not once per file. The W3C alt decision tree turns that into five questions you can ask in order:

  • Does the image contain text? Reproduce the text, unless the same words are already on the page as real text.
  • Is it a link or a button? Describe where it goes or what it does.
  • Does it convey information? Give a brief description of that information.
  • Does it repeat nearby text? Then it may need no alternative of its own.
  • Is it only decoration? Use empty alt text.

Write the first draft in your own words and read it as a person who cannot see the page. If it tells them what the sighted visitor learns from the image, it is done. If you are adding detail that does not change what the visitor understands, cut it. The W3C images tutorial recommends the most concise description that does the job, and Section508.gov says alt text should be "short and to the point" and should not repeat text that sits right beside the image.

Team photos and product shots get a short description of what matters

Informative images are the ones most business sites have the most of, so they are where good habits pay off. For a team photo, say who or what is shown and where, and add names only when the people's identities matter on that page. For a product photo, name the product and the feature a buyer would notice. Start with the useful subject and skip opening words like "image of" or "photo of," because a screen reader already announces that it is an image.

Alt text examples by image type
ImageAlt text patternExample
Team photoWho is shown and whereFour employees standing in front of the shop's service van.
Product photoProduct name and the feature that mattersBlue ceramic coffee mug with a white handle.
Logo that names the businessThe business nameAcme Plumbing
Logo that links homeThe destinationAcme Plumbing home
Before and afterThe comparison and what changedBefore: cracked concrete walkway. After: repaired walkway with a smooth surface.
ChartA short summary, with the data in nearby textBar chart showing online leads increasing from 42 in January to 78 in March.
ImageTeam photo
Alt text patternWho is shown and where
ExampleFour employees standing in front of the shop's service van.
ImageProduct photo
Alt text patternProduct name and the feature that matters
ExampleBlue ceramic coffee mug with a white handle.
ImageLogo that names the business
Alt text patternThe business name
ExampleAcme Plumbing
ImageLogo that links home
Alt text patternThe destination
ExampleAcme Plumbing home
ImageBefore and after
Alt text patternThe comparison and what changed
ExampleBefore: cracked concrete walkway. After: repaired walkway with a smooth surface.
ImageChart
Alt text patternA short summary, with the data in nearby text
ExampleBar chart showing online leads increasing from 42 in January to 78 in March.

These examples follow the W3C guidance, and Acme Plumbing is a made-up name used only to show the pattern. Swap in your own details. Keep each product image's alt text different from the next, because identical text on ten different photos tells a screen-reader user nothing about which is which.

A blue ceramic coffee mug with a white handle on a plain wooden shelf next to a folded dish towel.
A product's alt text names the product and the feature a buyer notices.

Logos, linked images and text in images each get a different answer

A logo that identifies your business takes the business name. If your logo sits next to the same name written out as text and adds nothing new, empty alt text is fine, because a screen reader would otherwise say the name twice. When the logo is also a link back to the home page, describe the action, for example the business name followed by "home," since that is what the person using a keyboard or screen reader needs to know before they press it.

The same idea covers any image that works as a button or link. The text should name the destination or the action, not describe the icon's shape. A magnifying-glass icon on a search button should read "Search," not "magnifying glass."

Images that contain words, such as a sale banner or a graphic with your phone number, should carry those words in the alt text unless the same words appear nearby as real text. Words baked into a graphic cannot be selected, resized or read by assistive technology, so the best fix is to put the essential text on the page as text and let the graphic be decoration. A related warning comes from Google: when an image is a link, its alt text can also be used as the anchor text for the link, so the destination words matter for search as well.

Charts need a short summary, with the numbers in real text

A vague alternative like "sales chart" gives a screen-reader user a label and no information. The W3C guide to complex images describes the fix: a short alt text that names the chart and its main point, plus the detailed data or explanation as ordinary text on the page. For a small chart, that can be a sentence or a three-row table under the graphic. For a detailed infographic, it may mean a section of text, and that takes more than a few minutes.

The rule also protects sighted visitors. Data that lives only inside an image cannot be searched, copied or enlarged cleanly, so a table beside the chart serves everybody. If a chart on your site carries a number you want customers to remember, put that number in the text.

A sheet of graph paper with a grid ruled in pencil and a few pencil dots, lying beside a closed notebook and a wooden ruler.
A chart's alt text gives the point in one sentence, and the full data goes in real text.

Decorative images should have empty alt text

Some images exist for looks: a divider line, a background texture, a stock photo that repeats what the heading already says. For these, set the alt text to empty, written as `alt=""`. That tells assistive technology to skip the image, so a screen-reader user is not interrupted by "decorative swirl" or a filename read out letter by letter. It is the right setting, and it does not mean the image is unimportant to your brand. It means the image is not needed to understand the page.

An empty alt attribute and a missing one are different. A missing attribute can leave assistive technology without any intentional alternative, while an empty one is a deliberate choice. Some platforms offer a decorative setting for this, so look near the alt text field in your editor and use it when it is there.

Decide with care. The test is whether a visitor who could not see the image would miss anything. If they would, it is informative and needs words. If they would not, it is decoration.

A small stack of blank index cards held with a paper clip beside a pencil on a plain desk.
An image that adds nothing to the page gets empty alt text.

Google reads alt text, and stuffing keywords does not help

Google Search Central's image SEO guidance says Google uses alt text, along with computer vision and the content of the page, to understand an image. It asks for "useful, information-rich content," and for keywords used naturally, and it warns against keyword stuffing. Its own example compares `alt="puppy"` with `alt="Dalmatian puppy playing fetch"`: the second tells a reader and a crawler what is in the photo.

For a business, that means describing the image as you would to a customer. "Cedar fence with a black gate behind a brick home" is useful. "Fence installer fence contractor best fence prices" is stuffing, and it reads badly through a screen reader. Google also recommends descriptive filenames and relevant text around the image, so a photo named for what it shows, placed beside a paragraph about it, gives every signal the same direction.

Alt text supports image understanding and accessibility. It is not a switch that guarantees rankings, image indexing, traffic or a particular search feature. If you want to see whether your images are earning visits, the post on image search traffic in Search Console shows where to look.

Alt text helps accessibility, but it does not make a site compliant

Missing alt text is a real barrier. The Department of Justice's web accessibility guidance, dated March 18, 2022, lists missing alt text among common accessibility problems and says text alternatives should be short and descriptive. Fixing it makes your site usable for people who rely on screen readers.

It does not settle your legal position. Alt text is one requirement among many, and no platform or plugin can promise that it alone prevents an ADA demand letter or proves compliance; Wix, for one, says on its accessibility page that it cannot guarantee compliance with every accessibility law. If you have received a letter or want to understand the risk, talk to an attorney, and read the post on what an ADA website demand letter means for the practical steps a site owner can take.

A pair of reading glasses resting on a closed notebook beside a small desk lamp on a wooden desk.
Alt text is one part of accessibility, alongside labels, contrast and keyboard use.

A ten-minute check covers the three images that matter most

You do not need to rewrite every image tonight. Start with the page visitors see first and work down this list:

  1. Open your home page in WAVE, the free checker from WebAIM, or use its browser extension for pages that are private or behind a login.
  2. Review each image WAVE flags as missing alt text.
  3. Read the alt text WAVE shows for the images that already have some.
  4. Label each image as informative, functional, decorative, text-containing or complex.
  5. Write or revise alt text for the three most important images: usually the hero image, a main service or product image, and any image next to a contact action.
  6. Set purely decorative images to empty alt text.
  7. Save, preview the page and run WAVE again.

WAVE itself notes that an automated tool cannot judge whether alt text is equivalent and appropriate, so the final call is yours. A clean score means no flagged errors, not that every description is good. After the home page, work through your main service pages, contact page and product pages. Images tied to a contact action or a purchase are good ones to do first.

The alt text field sits in a different place on each platform

Every major platform has the field, though the label and the path differ. In WordPress, select an image block and fill in the Alternative Text field, or edit it in the Media Library. In Wix, select the image, open Settings and use the "What's in the image?" box. In Squarespace, edit the image and use its alt text or description field, which depends on the block type. In Shopify, open a theme image or a product image and enter the text in the alt-text field. The platform help pages for WordPress, Wix, Squarespace and Shopify show the current steps.

Menus change with plans, editor versions and themes, so confirm the path in your own editor before you rely on this list. For a logo in your header or a repeated icon, the text often lives in the theme and not in the media library, which means one fix there covers the whole site.

You can usually fix the highest-priority images yourself in minutes, and nobody should sell alt text as an SEO trick or a legal shield. Help becomes worth paying for when the site has many templates, hundreds of images, ecommerce variants, complex charts, content pulled in by a plugin, or a theme that outputs images wrongly. At that size the work is not typing a sentence into a field. It is reviewing each image in its page, repairing the templates, testing the rendered result, writing rules your team can follow and checking again after updates.

What goes in the alt text box?

Pick an answer to begin.

1. A divider line between two sections adds nothing to the content. What should its alt text be?

2. Your logo is a link back to the home page. What should the alt text say?

3. Which alt text is best for a product photo?

Frequently Asked Questions About how to write alt text

What is alt text?

Alt text is a text alternative that communicates an image's information or function to people who cannot see it and to search engines.

Does every image need descriptive alt text?

Informative and functional images need meaningful alternatives. Purely decorative images should use empty alt text, written as alt="".

Should alt text include keywords?

Use relevant words naturally when they describe the image. Google warns against keyword stuffing, and a stuffed description reads badly through a screen reader.

How long should alt text be?

The W3C recommends the most concise description that does the job, so there is no fixed length. Give the useful subject or action first and stop when the image's purpose is covered.

What should a logo's alt text say?

Use the business name. If the logo links home, describe the destination, such as the name followed by "home."

Does alt text guarantee ADA compliance or better rankings?

No. Alt text addresses one accessibility requirement among many, and Google uses it as one signal among several.

Moving Forward

Alt text comes down to one question asked image by image: what does this do on this page? Informative images get a short description, linked images get their destination, images of text get the text, charts get a summary with the data beside them, and decoration gets an empty alt attribute. Keywords belong only where they describe the image naturally.

Doing this well makes your pages usable for people who rely on screen readers and gives search engines a clearer read on what each image shows. It also saves rework, because a site where every new image follows the same habit never builds up a backlog.

If your site has hundreds of images, several templates or a theme that mishandles them, Web Leveling can review the pages, repair the templates and set up a simple rule for new uploads as part of our web design work, and you can ask us to check your site's images. We work with small and medium businesses across the country and overseas.

Terms

Alt text words in this post

Tap a term to see what it means.

Alt text. A short text alternative for an image, read by screen readers and used by search engines.

Decorative image. An image that adds nothing a visitor needs to understand the page, given empty alt text.

Screen reader. Software that reads a page aloud for people who are blind or have low vision.

Functional image. An image that works as a link or button, described by its destination or action.

Complex image. A chart, graph or infographic that needs a short summary plus detailed data in text.

WCAG. The Web Content Accessibility Guidelines, the W3C's standard for accessible web content.