Alt Text Best Practices: Writing Descriptions That Actually Help

Alt Text Is More Than a Legal Checkbox

The alt attribute on <img> elements is perhaps the most widely known accessibility requirement. WCAG 1.1.1 (Non-text Content) is typically the first criterion mentioned in any accessibility introduction. And yet the quality of alt text across the web is remarkably poor — either missing entirely, clearly auto-generated from filenames, or so generic as to be useless.

Good alt text requires writing skill, context, and judgment. The goal is not to satisfy an automated checker; it is to give a screen reader user the same understanding of the image that a sighted user would receive.

The Core Principle: What Would Someone Miss?

The single most useful question when writing alt text: if this image were invisible, what would a sighted user know that a screen reader user would not? Your alt text should provide exactly that information — no more, no less.

Decorative Images: When to Use Empty Alt

A decorative image is one that adds no information beyond what is already in the surrounding text. Common examples: abstract background shapes, decorative dividers, stock photos used purely for visual texture.

For decorative images, use alt="" (empty alt, not absent). An absent alt attribute causes many screen readers to announce the filename. An empty alt="" signals "skip this image, it is decorative."

Informative Images: Describe the Content, Not the Image

For images that convey information, the alt text should describe the meaning, not the visual appearance of the image.

Poor alt text: "photo of a dog" (describes what type of image it is)
Better alt text: "Golden retriever sitting in autumn leaves" (describes the content)
Context-appropriate: On a dog adoption page — "Buddy, a 3-year-old golden retriever available for adoption at the Denver shelter"

Context changes everything. The same image on a veterinary blog post might need alt text that describes what the dog's condition illustrates, not just what it looks like.

Functional Images: Describe the Action

Images that are links or buttons should have alt text that describes the function, not the image. When an image is the only content inside a link or button, the alt text of the image becomes the accessible name of that control.

<!-- Poor: describes the image -->
<a href="/cart"><img src="cart.svg" alt="Shopping cart icon" /></a>

<!-- Better: describes the action -->
<a href="/cart"><img src="cart.svg" alt="View shopping cart" /></a>

For SVG icons used inside buttons, the preferred modern approach is to set aria-hidden="true" on the SVG and provide the accessible name on the button itself via aria-label.

Complex Images: When Alt Text Is Not Enough

Charts, graphs, maps, diagrams, and infographics often cannot be adequately described in a brief alt text. For these, use aria-describedby pointing to a detailed description element in the DOM, or a visible <figcaption> inside a <figure> element.

What to Avoid

• Redundant descriptions: Do not start alt text with "Image of" or "Photo of" — screen readers already announce the element type.
• Keyword stuffing: Alt text is not an SEO field. Stuffing it with keywords is both useless to screen reader users and penalized by search engines.
• Very long alt text: Alt text over 100–150 characters is hard to listen to. For longer descriptions, use aria-describedby.
• Filenames as alt text: alt="IMG_20241205_142356.jpg" is worse than empty. The ADA Compliance Checker extension specifically detects when alt text looks like a filename.

Testing Alt Text Quality

Automated tools like the ADA Compliance Checker extension can detect the presence or absence of alt text, and flag clear failures like filenames used as alt text. But judging whether alt text is good requires human review.

The best testing method: view your page with a screen reader and listen to how images are announced in context. Ask whether the experience makes sense to someone who cannot see the page. If an image announcement disrupts rather than aids comprehension, the alt text needs work.