How to Write Alt Text That Actually Helps People

A screen reader hits your homepage image and announces: "IMG 4382 dot JPEG." That's not alt text. That's a file name your CMS pulled in because nobody wrote an actual description. And right now, according to WebAIM's 2025 analysis of a million websites, roughly one in five images on the web has no alt text at all. Another 13% have alt text so useless it might as well not exist — things like "image," "photo," "banner," or a duplicate of the text already sitting next to the image.

We see this on client sites constantly. Someone uploads 40 product photos, skips every alt text field, and calls it done. Or worse, someone who read a blog post about SEO in 2014 stuffs every alt attribute with keyword soup: alt="Calgary best plumber affordable plumber Calgary AB plumbing services near me". Neither version helps anyone. Not the screen reader user trying to understand your content. Not Google trying to index your images. Not the AI assistant trying to figure out what your business actually does.

Writing good alt text isn't difficult. But it does require you to think about what an image is actually doing on the page. That question has more than one answer, and the answer changes everything about what you write.

The Question That Determines Everything

Before you type a single character of alt text, ask yourself this: if the image disappeared entirely, what information would the reader lose?

If the answer is "none," the image is decorative. A background gradient, an abstract shape, a divider line between sections, a stock photo of a handshake that adds no information the surrounding text doesn't already cover. These images get alt="" — an empty alt attribute. Not a missing alt attribute. An explicitly empty one. The difference matters.

When you leave the alt attribute off entirely, screen readers don't know what to do. Many will fall back to reading the file name. Some will read the full image URL. Either way, the user hears garbage. When you write alt="", you're telling assistive technology: this image is decorative, skip it, move on. The screen reader stays silent, and the user keeps their train of thought.

If the answer is "they'd lose actual information," you need real alt text. And the kind of information determines how you write it.

The W3C's Web Accessibility Initiative publishes an alt text decision tree that walks through this logic. It's thorough, and if you work with images regularly, it's worth bookmarking. But the decision comes down to three categories: decorative images, informative images, and functional images.

Decorative vs. Informative vs. Functional

Decorative images exist for visual appeal only. They don't communicate content. They don't add meaning. They exist because the page would look bare without them.

Use alt="" for:

• Background textures and gradients
• Ornamental borders and dividers
• Icons that sit next to text that already says the same thing (a phone icon next to the word "Phone")
• Stock photography chosen for aesthetics, not information
• Spacer images (if you still have those, we should talk)

Informative images convey content the surrounding text doesn't. A chart, a diagram, a photo of a product, a screenshot showing a specific error message, a team photo on your about page. These need alt text that communicates what the image shows.

Here's where most people get it wrong: they describe what the image looks like instead of what it means. There's a difference.

Bad: alt="Bar chart with blue and orange bars"

Good: alt="Bar chart showing website traffic increased 34% from January to June 2025"

The first describes the pixels. The second describes the information. A person who can't see the chart doesn't care that the bars are blue and orange. They care about the data the chart represents.

A few more comparisons:

Bad: alt="Photo of a person at a desk" Good: alt="Breemedia developer testing keyboard navigation on a client's e-commerce checkout page"

Bad: alt="Screenshot of a website" Good: alt="WAVE accessibility evaluation tool showing 23 errors on a sample homepage"

Bad: alt="Company logo" Good: alt="Breemedia logo" (the company name is the meaningful content)

Context matters enormously. The same photograph of a building could need completely different alt text depending on where it appears. On an architecture firm's portfolio page: alt="Front elevation of the Riverside Office Complex, a three-storey glass and steel commercial building". On a real estate listing: alt="Commercial office space for lease at 425 River Avenue, Calgary". On a blog post about urban development: alt="New mixed-use development under construction in Calgary's East Village, February 2025". Same image. Three different purposes. Three different descriptions.

Functional images are used as links or buttons. The alt text should describe what happens when you click, not what the image looks like.

Bad: alt="Magnifying glass icon" Good: alt="Search"

Bad: alt="Right-pointing arrow" Good: alt="Next page"

Bad: alt="Red shopping cart" Good: alt="View shopping cart — 3 items"

When an image is the only content inside a link, the alt text becomes the link text. Screen readers announce it as a clickable element. If your alt text says "image of a magnifying glass," the user hears "link: image of a magnifying glass" and has to guess what it does. If your alt text says "Search," they know exactly what it does.

Good alt text doesn't describe what an image looks like. It communicates what the image means in context — the information a reader would lose if the image wasn't there.

The Mistakes We See Most Often

We audit a lot of websites. The same alt text problems show up on almost every one.

"Image of" and "Photo of" prefixes. Screen readers already announce that something is an image before reading the alt text. Writing alt="Image of our Calgary office" means the user hears "image, image of our Calgary office." It's redundant. Drop the prefix.

Alt text that duplicates adjacent text. If you have a photo of your team with a caption underneath that says "Our development team at the 2025 Calgary tech meetup," the alt text shouldn't say the same thing. The user would hear the information twice. Either use alt="" and let the caption carry the description, or write alt text that adds something the caption doesn't mention.

File names as alt text. alt="DSC_0847.jpg" or alt="hero-banner-final-v2.png" are meaningless. Most CMS platforms pull the file name into the alt field by default if you don't fill it in. WordPress does this. Shopify does this. Check your images — you might have dozens of these without realizing it.

Keyword stuffing. Writing alt text for search engines instead of people is bad for both. Google's own documentation says to focus on creating useful, information-rich content that uses keywords appropriately and in context. Cramming "Calgary web design affordable web development services Calgary Alberta" into an alt attribute doesn't help your rankings, and it's actively hostile to screen reader users who have to sit through it. Google's search algorithms are sophisticated enough to penalize this kind of thing, and screen reader users will leave your site.

The CMS default "Add alt text" placeholder left in place. We've seen alt attributes that literally say "Add alt text here" on production websites. Content management systems sometimes use placeholder text in the alt field. If nobody replaces it, that's what screen readers announce.

Overly long descriptions. Alt text should be concise. WebAIM recommends keeping it under roughly 125-150 characters. If you need a longer description — for a complex chart, an infographic, or a detailed diagram — use a longdesc attribute or provide the full description in the page content near the image. The alt text can then reference it: alt="Q3 2025 revenue breakdown by service line. Full data in the table below."

Alt Text and Your Visibility

This isn't just about accessibility compliance, though meeting WCAG 2.1 Success Criterion 1.1.1 (Non-text Content) is a legal baseline you should be hitting. Alt text directly affects how search engines and AI systems understand your content.

Google uses alt text as one of its primary signals for understanding image content. Their documentation is explicit about this: alt text helps Google understand what an image is about and how it relates to the rest of the page. When your product images have no descriptions, they're invisible to image search entirely.

AI search systems work the same way. We've written about the connection between accessibility and AI visibility in detail — screen readers and AI crawlers parse your site using the same structural signals. When an AI assistant is trying to answer the question "Who does WCAG audits in Calgary?" and your site has images of your audit process with no alt text, that's context the AI never sees. Your competitors who bothered to write three-second descriptions are getting cited instead.

There's a deeper structural point here too. Sites with missing alt text tend to have other accessibility problems: broken heading hierarchies, unlabelled form fields, missing semantic HTML. Those problems compound. We put together an accessibility checklist for business owners that covers the full picture — alt text is one item on a longer list of things that affect both accessibility and search visibility.

And if you're running a local business, structured data and alt text work together. Your LocalBusiness schema tells search engines what you do and where you are. Your alt text tells them what your images show. When those signals align, you get a clearer, more trustworthy profile in search results. We covered the structured data side of this in our guide for local businesses.

Making This Part of Your Process

The reason most websites have bad alt text isn't that people don't care. It's that nobody built the habit into their content workflow. Images get uploaded in a rush. The CMS doesn't force you to fill in the alt field. Nobody checks after the fact.

Here's what actually works:

Make the alt text field required in your CMS. WordPress plugins like Jetpack, or custom field setups with ACF, can enforce this. If your content authors physically can't publish without filling in alt text, they'll fill it in.

Write alt text at the same time you write the content, not after. When you're writing a blog post and you insert an image, write the alt text right then. You know exactly why you chose that image. You know what it adds. That context evaporates if you come back three weeks later to "add alt text to old posts."

Audit what you already have. Install the WAVE browser extension, visit your key pages, and look for the missing alt text warnings. We covered how to use WAVE and similar tools in our accessibility guide. The results are usually sobering. But at least you'll know the scope of the problem.

Don't let AI generate your alt text without reviewing it. Automated alt text tools are getting better, but they describe what images look like, not what they mean. An AI might generate alt="a woman sitting at a desk with a laptop" when the image needs alt="Customer support representative responding to a live chat inquiry". The visual description isn't wrong. But it misses the point of the image in context.

If your site has hundreds of images with missing or broken alt text and you don't have the internal capacity to fix it, that's something our accessibility and WCAG services cover. We audit the full image inventory, write the descriptions, and set up CMS workflows so the problem doesn't come back.

If you have staff uploading content, train them. Show them the difference between alt="team photo" and alt="Five-person Breemedia development team at our Calgary office, January 2025". Once people see the difference, they tend to get it quickly. The problem is almost never resistance. It's that nobody showed them what good looks like.

The single thing to take away from this entire article: alt text answers the question "what would the reader miss if this image wasn't here?" If they'd miss nothing, write alt="". If they'd miss something, write that something down. It takes five seconds per image and it makes your site work for everyone.

Sources

• W3C WAI: An Alt Decision Tree — The W3C's official decision tree for determining appropriate alt text based on image type and context.
• W3C WAI: Images Tutorial — Full tutorial covering decorative, informative, functional, complex, and grouped images with examples.
• WCAG 2.1 Success Criterion 1.1.1: Non-text Content — The Level A requirement that all non-text content has a text alternative serving the equivalent purpose.
• WebAIM: Alternative Text — WebAIM's guide to writing alternative text, including context-dependent examples and common mistakes.
• WebAIM: The WebAIM Million — 2025 Report — Annual analysis of the top 1,000,000 home pages. Found 18.5% of images lacked alt text, plus 13% had questionable or repetitive descriptions.
• web.dev: Images Accessibility — Google's accessibility course module on image descriptions, decorative vs. informative distinctions, and implementation.
• Deque: Writing Alt Text for Accessibility — Guidelines and Examples — Practical guide from Deque covering functional images, linked images, and alt text length considerations.
• WebAIM: Screen Reader User Survey #10 — Survey of 1,539 screen reader users conducted December 2023–January 2024. Missing or improper alt text cited as a persistent top issue.