Alt Text Guide: How to Write Image Descriptions That Actually Work

What Is Alt Text and Why Does WCAG 1.1.1 Require It?

Alt text (alternative text) is a written description embedded in an image's HTML alt attribute that conveys the content and function of the image to users who cannot see it. Screen readers announce alt text to blind and low-vision users; it also appears in place of broken images and is indexed by search engines. WCAG Success Criterion 1.1.1 (Non-text Content, Level A) requires that every non-decorative image have a text alternative that serves an equivalent purpose. WebAIM's annual survey of the top one million websites consistently finds missing or inadequate alt text on more than 50% of home pages.

The 5 Rules of Effective Alt Text

Good alt text is not simply a description of what is visually present — it is the description that a sighted user would receive from the context of viewing that image on that page. A well-written alt text answers the question: 'What would I be missing if I couldn't see this image?'

• Be specific and concise: convey the essential information without unnecessary detail (aim for under 125 characters for most images)
• Match the context: the same image may need different alt text on a product page versus a blog post about that product
• Do not start with 'image of', 'photo of', or 'graphic of' — screen readers already announce it as an image
• Include text that appears in the image: if a banner or infographic contains readable text, that text must be in the alt attribute or nearby in the page
• Never use the file name as alt text: 'IMG_4872.jpg' or 'hero-banner-final-v3.png' provides no value to a screen reader user

Alt Text by Image Type

There is no single formula for alt text — the right approach depends on what the image is and what function it performs on the page. Understanding these categories is the most important skill in alt text authorship.

Common Alt Text Mistakes

Even developers who understand the concept of alt text frequently make the same mistakes in practice. Awareness of these patterns helps content teams audit and improve existing content more efficiently.

• Using file names as alt text (e.g., alt="hero-image-2024.jpg") — provides no information
• Beginning with 'Image of' or 'Photo of' — redundant and wastes limited characters
• Writing overly long descriptions for simple images — more than 150 characters is usually too much
• Using the same alt text for every image on a page — each image should have unique, contextually appropriate alt text
• Omitting the alt attribute entirely rather than using alt="" for decorative images
• Not including text visible in images (logos, banners, screenshots with UI text)

Testing Alt Text with Screen Readers

The most reliable way to evaluate alt text quality is to test with an actual screen reader. NVDA (free, Windows) and VoiceOver (built into macOS and iOS) are the most widely used by assistive technology users. Navigate to the page and use the screen reader's image navigation shortcut to move between images and hear how each one is announced.

• NVDA + Firefox or Chrome on Windows: press G to navigate between images
• VoiceOver + Safari on macOS: use VO+Command+G to navigate images
• VoiceOver on iOS: swipe right to navigate elements; images are announced with alt text
• Browser DevTools: inspect the alt attribute directly; look for missing, empty, or filename-based values
• axe DevTools browser extension: automated detection of images with missing alt attributes

Context-Dependent Alt Text: The Same Image, Different Descriptions

One of the most nuanced aspects of alt text is that the correct description depends entirely on how and why the image is used on a specific page. A photograph of a red apple used on a recipe page should describe appearance; the same photograph used as a link to the 'Healthy Eating' category should have alt="Healthy Eating"; and as a decorative header illustration it should use alt="". Training content teams to ask 'why is this image here and what would someone miss without it?' is the most effective way to raise alt text quality at scale.