If you are auditing your website's content layout, you have likely asked: how do I write good alt text? According to WebAIM's annual evaluation of the top one million homepages, missing or poorly written alternative text (alt text) is the single most common accessibility failure on the web, present on over 60% of all websites.
Because automated crawlers can spot missing alt tags instantly, this error is also the number one trigger for digital ADA lawsuits.
Writing good alt text is not difficult, but it requires shifting your perspective. You must stop treating the alt attribute as an SEO keyword drawer and start treating it as a functional translation tool.
What is alt text and why does it break?
Alt text is a line of descriptive code attached to an image tag:
<img src="shoes.webp" alt="Red canvas high-top sneakers on a white background">
When a visually impaired user visits your site, their screen reader software reads the HTML. When it encounters the image, it reads the alt text aloud.
If the alt tag is missing, the screen reader does not remain silent. Instead, it reads the raw file name (e.g., banner_v2_final_compressed.png). This makes the reading experience incredibly disjointed.
If the alt tag is present but stuffed with keywords (e.g., alt="best local plumber plumbing repair emergency drain cleaning"), the user is forced to listen to a list of spam terms, which breaks the flow of the article.
Common alt text mistakes to avoid
Before writing, make sure you avoid these common pitfalls:
Mistake 1: Starting with "image of..." or "photo of..."
Screen-reader software automatically announces the element type before reading the alt text. If you write alt="photo of a desk", the screen reader will say: "Graphic: photo of a desk." This is repetitive. Skip the intro and write alt="A wooden desk with a laptop and coffee cup".
Mistake 2: Copying the caption
Alt text and captions have different jobs. A caption is shown to everyone and provides supplementary context or credit (e.g., "Photo by John Doe"). Alt text is hidden from view and describes the visual reality of the image. Do not use the exact same text for both.
Mistake 3: Leaving it out for decorative elements
If an image is purely decorative, like a divider line, an abstract background circle, or a general checkmark icon, you still need the alt attribute. If you omit the tag, the screen reader will read the file name.
- The Fix: Set the attribute to an empty quote:
alt="". This instructs the screen reader to skip the element entirely.
Want a website that turns visitors into customers, not just compliments?
Book a 15-min introThe rules for writing excellent alt text
To write descriptive alt text that supports screen readers and search engine crawlers, follow these rules based on the image's function:
1. E-commerce product images
For products, the alt text must contain the specific details a shopper needs to make a buying decision: color, shape, cut, and texture.
- Weak:
alt="blue dress" - Strong:
alt="Royal blue A-line midi dress with a V-neckline, long sleeves, and a belted waist"
The strong description allows a blind customer to build a clear mental image of the product, helping them shop independently.
2. Informational charts and graphs
If you share a diagram, chart, or graph, the alt text must explain the outcome or trend, not just name the chart type.
- Weak:
alt="marketing budget chart" - Strong:
alt="A bar chart showing search marketing budget increasing by 20% while print advertising budget decreases by 50%"
If the chart is too complex to summarize in a short sentence, describe the general trend in the alt text and write a detailed description in the body copy directly below the image.
3. Functional images (Buttons and Links)
If an image acts as a clickable button (such as a shopping cart icon or a magnifying glass), the alt text must describe the action, not the picture.
- Weak:
alt="magnifying glass" - Strong:
alt="Submit search"
If the screen reader reads "magnifying glass," the user has no idea that clicking it will submit a search query. Treat functional alt text like button labels.
The SEO and speed side benefits
While alt text is an accessibility requirement, it also serves as a powerful SEO asset.
Search engine crawlers are text-based. They cannot read the visual contents of a JPEG or WebP file. By writing descriptive alt text containing natural, context-rich keywords, you allow Google to index your images accurately. This directly increases your search engine visibility in Google Image Search, which is a major driver of traffic for e-commerce and portfolio sites.
Additionally, if a user has a slow mobile connection and blocks images to save bandwidth, the browser displays your alt text in place of the missing image, ensuring they can still navigate your content.
If your content management system or database is filled with unlabeled media assets, an image and content accessibility audit can clean up your library. Stop treating accessibility as an afterthought; write alt text that helps every customer understand your brand.