Alt Text That Actually Works: Writing for Screen Readers

Why Alt Text Matters

Approximately 2.2 billion people worldwide have vision impairments, including over 43 million who are blind. Many of these individuals use screen readers—software that reads web content aloud—to access websites. Screen readers can read text, but they cannot interpret images. Alt text provides the textual description that allows screen readers to convey image meaning to their users.

For screen reader users, alt text isn't just helpful—it's essential. Without alt text, an image communicates nothing. A website full of meaningful images becomes useless. Alt text transforms images from inaccessible barriers into accessible components of the user experience.

Beyond accessibility, alt text provides practical benefits: it appears when images fail to load, provides context when CSS is disabled, and improves search engine optimization by helping search engines understand image content. Proper alt text is genuinely useful for everyone.

WCAG requires alt text for all images. This requirement is absolute—there are no exceptions for decorative images or images already described in adjacent text. The distinction between decorative and informative images determines what goes in the alt attribute, but every image requires consideration.

Understanding the Purpose of Alt Text

Effective alt text serves a specific purpose: to provide equivalent information to what a sighted person receives from the image. If you remove the image from the page but keep the alt text, would the page still make sense? Would someone understand everything the image was meant to convey?

This principle prevents common alt text mistakes. Alt text is not a caption—captions appear on screen and supplement alt text. Alt text is not metadata—it should not include technical information about the image file. Alt text is not a space to keyword-stuff for SEO—search engines recognize and penalize this practice.

Alt text should answer these questions: What is this image? Why is it here? What information does it convey? What would a sighted user understand from this image that someone using a screen reader should also understand?

Alt Text for Informative Images

Informative images—those that convey important information—require descriptive alt text that accurately describes the image content.

Photographs and Illustrations

When your page includes a photograph or illustration that conveys information, describe what you see and why it matters. For example:

Poor alt text: "Photo"

Better alt text: "A developer reviewing accessibility guidelines on a computer screen"

Best alt text (context dependent): "A developer reviewing WCAG 2.1 Level AAA accessibility guidelines on a computer screen in an office setting"

The "best" version includes more detail, but length should be appropriate to context. A small thumbnail doesn't need as much detail as a large featured image. Consider what information is important and what detail would be distracting for a screen reader user.

Charts and Graphs

Charts and graphs present particular challenges because they communicate information visually that must be conveyed through alt text. A simple bar chart showing sales trends cannot be adequately described in a single line.

Poor alt text: "Chart"

Better alt text: "Bar chart showing quarterly sales trends for 2024"

Best approach: Combined alt text and data table. Use alt text to describe the chart type, purpose, and overall trend, then provide a data table below the chart containing the actual numbers.

Example: "Bar chart showing quarterly sales increasing from Q1 2024 to Q4 2024. See the table below for detailed numbers."

Screenshots

Screenshots require alt text describing their content. Describe what's visible and why the screenshot is relevant to the surrounding text.

Context: "Here's where to find the accessibility settings in Windows:"

Alt text: "Windows Settings window showing Accessibility section open with Vision options expanded, highlighting 'High contrast' toggle switch"

Maps

Maps present information visually through geography and markers. Alt text should describe the geographic area, any marked locations, and the purpose of the map.

Poor alt text: "Map"

Better alt text: "Map of Western United States showing office locations in Seattle, San Francisco, Denver, and Austin"

Alt Text for Functional Images

Functional images—images that are interactive or part of buttons—require different alt text approach.

Logo Images

Logo images within a link should include the company or site name as alt text.

HTML: <a href="/"><img src="logo.svg" alt="A11yscan home"></a>

This tells screen reader users what the logo is and indicates it's a link to the home page.

Button Images

Images used as buttons should describe the button's function, not the image appearance.

Poor alt text: "Magnifying glass icon"

Better alt text: "Search" (when used in a search button)

Social Media Icons

Social media follow buttons with icon images should describe the social platform.

HTML: <a href="https://twitter.com/a11yscan"><img src="twitter.svg" alt="Follow us on Twitter"></a>

Decorative Images and the Empty Alt Attribute

Decorative images—images that serve no informative purpose—should use an empty alt attribute: alt=""

This tells screen readers to skip the image entirely, which is appropriate for purely decorative elements. Do not omit the alt attribute entirely; screen readers will read the filename instead.

Identifying Decorative Images

A decorative image is one where removing it wouldn't change the page's meaning or functionality. Examples include design flourishes, background pattern images, divider lines, and visual spacing elements.

However, many images that appear "decorative" actually convey information. A photo illustrating a concept isn't merely decorative—it provides visual explanation. An icon next to text that's central to the message isn't decorative—it reinforces the message. When in doubt, include descriptive alt text.

Alt Text Length and Practical Guidelines

No official character limit exists for alt text, but practical guidelines help you write effectively.

Keep It Concise

Alt text should typically be 100-125 characters or fewer, roughly equivalent to a sentence. This allows screen reader users to quickly understand the image without excessive reading. However, for complex images, longer alt text is appropriate if necessary.

Avoid Redundancy

If the image caption or surrounding text already describes the image, don't repeat that description in alt text. Instead, use alt text to add information the surrounding text doesn't provide or write a shorter alt text that works alongside the caption.

Write Naturally

Write alt text as if describing the image to someone over the phone. Natural language is easier for screen reader users to understand than overly formal or keyword-stuffed descriptions.

Avoid Phrases Like "Image of" or "Picture of"

Screen readers already announce that they're reading an image. Prefacing alt text with "Image of" is redundant. Write directly: "A developer typing code" rather than "Image of a developer typing code."

Common Alt Text Mistakes

Understanding what not to do helps ensure your alt text is genuinely accessible.

Mistake 1: Missing Alt Text

The most common error is omitting alt text entirely. Every image must have an alt attribute—even if the value is empty for decorative images.

Mistake 2: Unhelpful Generic Alt Text

Alt text like "Image," "Photo," "Picture," or "Graphic" provides no useful information. Even image filenames like "123456.jpg" are better replaced with meaningful descriptions.

Mistake 3: Over-Detailed Alt Text

While detail is good, excessive detail becomes burdensome for screen reader users. A photo of a person doesn't need to describe clothing in minute detail unless clothing is central to the image's purpose.

Mistake 4: SEO Keyword Stuffing

Filling alt text with keywords is both an accessibility and SEO failure. Search engines recognize and penalize keyword stuffing, and it makes alt text unhelpful for screen reader users.

Mistake 5: Ignoring Image Context

The same image requires different alt text in different contexts. Alt text should relate to why the image is included.

Mistake 6: Using Alt Text Instead of Captions

While both serve different purposes, many developers use alt text where captions would be better. Use alt text for the image itself and captions for additional context that sighted users should also see.

Testing Alt Text Effectiveness

Verify that your alt text is genuinely useful by testing it with screen readers.

Screen Reader Testing

Use free screen readers like NVDA (Windows) or VoiceOver (macOS/iOS) to hear how alt text sounds. Your alt text should make sense when read aloud in the order it appears.

Image Disable Testing

In your browser's developer tools, disable images. Can you understand the page and find important information? If not, your alt text isn't adequately descriptive.

Browser Tools

Browser extensions like axe DevTools or WAVE highlight missing alt text and flag images with generic or unhelpful alt attributes.

Special Cases and Image Types

Certain image types present unique alt text challenges.

Infographics

Complex infographics require substantial alt text or accompanying text descriptions. Provide both: concise alt text describing the overall message, plus a detailed text breakdown.

Animated GIFs

Alt text for animated GIFs should describe the animation and its purpose.

Example: "Animated diagram showing how keyboard navigation flows through a web page"

SVG Images

SVG images sometimes require both image-level alt attributes and internal ARIA labels. Test SVGs with screen readers to ensure all necessary information is conveyed.

Background Images

CSS background images cannot have alt text. If a background image conveys important information, use a standard <img> element instead or provide the information through other means.

Key Takeaways

• Alt text is essential for screen reader users, providing the only way they can understand image content.
• Write alt text that answers: What is this image? Why is it here? What information does it convey?
• Keep alt text concise (typically 100-125 characters) but complete enough to be meaningful.
• For decorative images, use an empty alt attribute (alt="") to tell screen readers to skip them.
• Avoid generic alt text like "Image" or "Photo" and never use alt text for SEO keyword stuffing.
• Different contexts may require different alt text for the same image.
• For complex images, combine concise alt text with detailed descriptions or data tables.
• Test alt text with screen readers to ensure it actually works for your users.

Resources

• WCAG 2.1 Text Alternatives (W3C)
• Alternative Text (WebAIM)
• Alt Text (A11y Project)
• NVDA Screen Reader (Free)
• HTML img Element (MDN)