Every image on your website is either helping or hiding. For the 285 million people worldwide with visual impairments, an image without good alt text is a blank wall — they know something is there, but they have no idea what it is. For search engines, it is a missed opportunity to understand and rank your content.

Alt text is not complicated, but most people get it wrong. They either skip it entirely, write something useless, or overthink it until they give up. This guide gives you a straightforward formula for writing alt text that actually helps, with examples for every type of image you will encounter on a business website.

What Is Alt Text?

Alt text (short for “alternative text”) is a written description attached to an image in your website’s code. You cannot see it by looking at the page normally. It works behind the scenes in three important situations:

1. Screen readers read it aloud. When a blind or low-vision person visits your page using a screen reader (software that converts text to speech), the screen reader announces your alt text in place of the image. Good alt text gives them the same information sighted visitors get from the image.

2. It appears when images fail to load. If someone has a slow internet connection, has images disabled, or if the image file is broken, the alt text appears in place of the image. This ensures the content still makes sense.

3. Search engines use it to understand images. Google cannot see pictures. It reads alt text to figure out what an image shows and whether it is relevant to a search query. Good alt text improves your visibility in Google Image Search and strengthens the SEO of the page.

Where to Add Alt Text

You do not need to edit code. Every major website platform has a simple field for alt text in the image upload or editing interface.

WordPress

Click on an image in your media library or in the post editor. Look for the Alt Text field in the sidebar on the right. Type your description there.

Shopify

Go to Settings, Files or click on any product image. You will see an Alt text field. You can also add alt text when inserting images into blog posts and pages.

Squarespace

Click on an image block, then click the pencil (edit) icon. Look for the Image Description or Alt Text field in the design panel.

Wix

Click on an image, select Settings (the gear icon), and fill in the Alt Text field under “What’s in the image? Tell Google.”

Email Platforms (Mailchimp, Klaviyo, etc.)

Most email builders have an alt text field when you click on an image block. This is especially important because many email clients block images by default — your alt text is the only thing recipients see until they choose to load images.

The Simple Formula

When you are staring at a blank alt text field, use this formula:

[What] + [Doing What/Looking How] + [Context That Matters]

That is it. Describe what the image shows as if you were explaining it to someone on the phone. Be specific. Be brief. One to two sentences is usually plenty.

Here is how the formula works in practice:

• A photo of your product: “Handmade ceramic coffee mug in ocean blue glaze, 12 oz, sitting on a wooden table.”
• A photo of your team: “Five team members standing in front of our storefront, smiling, wearing company t-shirts.”
• A chart: “Bar chart showing website traffic growth from 10,000 monthly visitors in January to 45,000 in December 2025.”

You do not need to be literary. You need to be accurate and useful.

Alt Text for Different Image Types

Product Photos

Product images are often the most important images on a business website. Your alt text should describe the product as specifically as you would if you were selling it to someone who cannot see the photo.

Bad: “Shoe” Better: “Running shoe” Best: “Women’s Nike Air Zoom Pegasus 41 running shoe in coral pink, side view”

Include details that matter for a purchase decision: the product name, color, size or variant if visible, and the angle or view shown.

More examples:

• “Black leather crossbody bag with gold chain strap, front view, closed”
• “Organic lavender hand soap in 8 oz glass pump bottle”
• “King-size linen duvet cover in sage green, styled on bed with white pillows”

Team and People Photos

Photos of people should describe who they are (if relevant) and what they are doing. Avoid describing physical appearance unless it is relevant to the context.

Bad: “Photo” Better: “Woman at desk” Best: “Sarah Chen, Head of Customer Success, speaking at our annual company retreat”

If the person’s identity matters (like a team page or an about page), include their name and role. If it is a stock photo or generic illustration, describe the scene.

More examples:

• “Customer service representative helping a client at the front desk”
• “Group of workshop participants taking notes at a round table”
• “Dr. James Nakamura, founder, in his office surrounded by bookshelves”

Charts and Graphs

Charts are some of the trickiest images to describe because they contain data. Your alt text should convey the key takeaway — the story the chart is telling — not list every data point.

Bad: “Chart” Better: “Sales chart” Best: “Line chart showing quarterly revenue increasing steadily from $120K in Q1 2025 to $340K in Q4 2025”

For complex charts with many data points, keep the alt text focused on the headline insight and provide a data table or detailed description in the body text of the page.

More examples:

• “Pie chart showing customer satisfaction ratings: 72% very satisfied, 18% satisfied, 7% neutral, 3% dissatisfied”
• “Bar chart comparing conversion rates across three landing page variants, with Variant B outperforming at 4.8%“

Screenshots

Screenshots appear frequently in tutorials, documentation, and case studies. Describe what the screenshot shows and highlight the important part.

Bad: “Screenshot” Better: “Dashboard screenshot” Best: “Screenshot of Google Analytics dashboard showing the Audience Overview report with 54,000 sessions highlighted”

If the screenshot is part of a tutorial, your alt text should describe what the reader should be looking at: “Shopify admin panel with the ‘Alt text’ field highlighted on the product image editor.”

Icons and Logos

Small icons that appear alongside text (like a phone icon next to a phone number) are typically decorative — the text already conveys the meaning. These should have empty alt text (see the section on decorative images below).

Logos need alt text when they are the only representation of the brand name.

Bad: “Logo” Best: “Acme Corporation logo”

If the logo links to the homepage, the alt text should reflect the link’s destination: “Acme Corporation — go to homepage.”

Infographics

Infographics are challenging because they pack a lot of information into a single image. Your alt text should provide a brief summary, and you should include the full content as regular text somewhere on the page (either in the body text or as an expandable section).

Alt text: “Infographic summarizing 10 steps to improve website accessibility, detailed description below”

Then provide the full text content of the infographic in the body of the page. This approach is good for accessibility and excellent for SEO, since search engines can now index all that content.

Decorative Images

Not every image needs a description. Decorative images — background patterns, visual dividers, purely aesthetic stock photos that do not add information — should have empty alt text.

Empty alt text looks like this: alt=""

This is not the same as missing alt text. Empty alt text is a deliberate instruction to screen readers: “This image is decorative. Skip it and move on.” Missing alt text (no alt attribute at all) causes screen readers to announce the file name, which is annoying and confusing.

Examples of decorative images:

• A colorful abstract background pattern
• A horizontal line divider between sections
• A generic stock photo used purely for visual appeal alongside a blog post that does not reference the photo

When in doubt, ask yourself: If I removed this image entirely, would the reader miss any information? If the answer is no, it is decorative. Use empty alt text.

Common Mistakes to Avoid

Mistake 1: Starting With “Image of” or “Photo of”

Screen readers already announce “image” before reading the alt text. Writing “Image of a sunset over the ocean” results in the screen reader saying “Image. Image of a sunset over the ocean.” That is redundant. Just write “Sunset over the ocean with orange and purple clouds.”

The exceptions are when the medium itself is the point: “Oil painting of a sunset over the ocean” or “Screenshot of the checkout page.” In these cases, the type of image is relevant information.

Mistake 2: Keyword Stuffing

Some people treat alt text like an SEO dumping ground: “Best affordable running shoe buy running shoes online cheap running shoes free shipping.” This is unhelpful for screen reader users, and search engines recognize and penalize keyword stuffing. Write for humans first. Include relevant keywords naturally.

Mistake 3: Being Too Vague

“Product” or “team photo” or “banner” tells the user almost nothing. If a sighted person would learn something from the image, a screen reader user deserves that same information.

Mistake 4: Being Too Detailed

A 200-word alt text describing every element of an image is overwhelming when read aloud. Keep it concise — usually under 125 characters for simple images, and no more than a couple of sentences for complex ones. If an image requires a lengthy description, put the detailed version in the body text and keep the alt text short.

Mistake 5: Leaving Alt Text Empty on Meaningful Images

Empty alt text (alt="") is correct for decorative images but a serious failure on meaningful ones. If the image shows your product, explains a concept, or provides information the text does not cover, it needs a real description.

Mistake 6: Using the File Name

“IMG_4872.jpg” or “hero-banner-final-v3.png” is meaningless to everyone. If your CMS auto-fills the alt text with the file name, overwrite it with a real description.

A Quick Reference Checklist

Use this checklist every time you upload an image to your website:

1. Is this image decorative? If yes, use empty alt text (alt=""). If no, continue.
2. What does the image show? Describe it in one to two sentences using the formula: What + Doing What/Looking How + Relevant Context.
3. Does it start with “image of” or “picture of”? Remove those words unless the medium is relevant.
4. Is it concise? Aim for under 125 characters for simple images.
5. Does it include relevant keywords naturally? Good. Does it feel like keyword stuffing? Rewrite it.
6. For complex images (charts, infographics), is there a text alternative in the body of the page? If not, add one.

How to Audit Your Existing Images

If your website has hundreds of images without alt text, here is a practical approach to catch up:

Prioritize by Traffic

Start with your highest-traffic pages. Check your analytics to find your top 10-20 pages and fix the images there first. These pages reach the most people and have the biggest impact on your SEO.

Work by Page Type

After your top pages, work through categories:

1. Product pages — These images directly influence sales
2. Homepage and landing pages — First impressions matter
3. Blog posts — Especially those that rank well in search
4. About and team pages — Personal and trust-building
5. Everything else — Work through the backlog over time

Track Your Progress

Keep a simple spreadsheet with columns for page URL, number of images, and number of images with alt text. Update it as you work through the backlog. This helps you see progress and stay motivated.

Alt Text Is a Skill, Not a Talent

Writing good alt text feels awkward at first. You will second-guess yourself. You will wonder if your descriptions are too long or too short. That is completely normal. Like any skill, it gets easier and faster with practice.

The most important thing is to start. Imperfect alt text is infinitely better than no alt text at all. You can always revisit and improve your descriptions later. What matters right now is that the description exists.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.