How to Write Alt Text for Images (With Real Examples)

Alt text is the value of the alt attribute on an image element. When a screen reader encounters an image, it reads the alt text aloud. When an image fails to load, the alt text appears in its place. When a search engine crawler indexes your page, the alt attribute is its primary signal for what the image contains or represents.

Under WCAG Success Criterion 1.1.1, every non-decorative image must have a text alternative that serves the same purpose as the image. That “same purpose” phrasing is load-bearing: WCAG is not asking you to describe pixels. It is asking you to convey the meaning or function the image provides to a sighted user.

It is a Level A requirement — the baseline, not the ceiling. And yet it is routinely the single most common automated finding in accessibility audits, because most content management systems make it trivially easy to upload an image and move on without filling in a field that only affects users you can't see.

One honest caveat worth stating upfront: automated scanners, including CompliaScan (which runs on axe-core), can reliably detect images that are missing the alt attribute entirely or that have obviously placeholder values like filenames. Whether your alt text is meaningfulis a human judgment call. Automated tools catch roughly 30–40% of WCAG issues — the presence of an alt attribute is in that detectable range; the quality of what you wrote is not. That distinction matters for how you staff a full accessibility audit.

Once you've established that an image warrants a description, these rules separate useful alt text from noise:

1. Skip “image of” and “photo of.” Screen readers already announce that the element is an image. Starting with “Image of a dog” wastes the first words on redundant framing.
2. Be specific but proportional. “Tabby cat sitting on a blue windowsill” is better than “cat.” It is also better than a 50-word essay. Match the level of detail to the image's role on the page.
3. For interactive elements, describe the function, not the appearance. A linked logo should read as its destination: “CompliaScan home page,” not “teal circular logo with white text.”
4. Convey the information, not just the content. A bar chart's alt text should summarize its key finding (“Bar chart: mobile traffic exceeded desktop in Q3 2025”), with a linked data table for users who need the full numbers.
5. Test it out loud. Read your alt text aloud without looking at the image. Would you understand the page? Could you act on a call to action? If not, revise.

Every major CMS exposes an alt text field. All of them make it easy to skip. The shared failure pattern is identical everywhere: someone uploads an image in a hurry and moves on, because the page still looks fine to them. The default behavior in most platforms is to substitute the filename — which gives you alt text like IMG_4821.jpg or hero-banner-final-v3.png. That is not alt text. It is a placeholder sitting in the right attribute.

WordPress stores alt text separately from the image file, so the same image can carry different alt text in different posts — which is a feature, and worth using. Shopify provides per-image alt fields in the media library and on product variants, but the field is optional and often blank. Wix, Squarespace, and Webflow all expose the setting, usually buried in an image panel that most users only open to crop.

The highest-leverage move on any CMS is to fix alt text at the template level first. If your site generates pages from a repeating template — product pages, blog posts, event listings — enforcing alt text at content-entry time can resolve the issue across hundreds of pages simultaneously. A template that repeats broken alt text also repeats fixed alt text. That is the same reason a single WCAG scan finding on a product template is worth treating as urgent rather than low-priority.

The fastest way to surface missing or empty alt attributes across your site is an automated scan. CompliaScan's ADA compliance checker reports every image flagged by WCAG 1.1.1, with its element location and the specific criterion it violates, so a developer can fix it without guessing. For a systematic approach to image requirements alongside other criteria, a WCAG checklist gives you a structured starting point.

For larger sites, prioritize by traffic. Your homepage, main product or service pages, and anything ranking prominently in organic search should go first. A fix on a high-traffic product template will often resolve the same violation across an entire catalog at once.

After remediation, alt text degrades. New images are uploaded without descriptions, existing images are repurposed in new contexts, third-party apps inject their own image elements on update. That drift is exactly the kind of regression that continuous accessibility monitoring is built to catch — a re-scan alerts you when a page that previously passed starts failing, before a tester finds it for you.

A note on AI-assisted suggestions: CompliaScan can surface AI-generated alt text recommendations using your own API key (OpenAI, Anthropic, or Google — BYOK, CompliaScan never marks up your costs). Treat these as a first draft. They need review by someone who understands the context and purpose of each image on the page. No tool — AI-powered or otherwise — guarantees compliance, and no generated text replaces the judgment of a person who knows what the image is actually communicating.