Image Alt Text Guidelines

Image alt text guidelines define how to describe images so screen reader users understand visual content. Effective alt text conveys the same information or function that sighted users receive from images.

What Is Image Alt Text

Alt text (alternative text) provides a text description of an image that screen readers announce to users. The alt attribute on img elements contains this text. When images fail to load, browsers may display alt text as a fallback.

WCAG Success Criterion 1.1.1 (Non-text Content) requires that all non-text content has a text alternative that serves the equivalent purpose. For images, the alt attribute provides this alternative. Empty alt (alt="") indicates decorative images that should be skipped.

Alt text quality significantly impacts screen reader user experience. Poor alt text leaves users without information. Overly verbose alt text wastes time. Effective alt text concisely conveys what the image communicates in context.

How to Write Effective Alt Text

Alt text should describe the purpose and content of images relative to their context. A product photo needs different alt text than the same image used as a decorative background.

For informative images that convey content, describe what the image shows and why it matters. A photo of a completed project might use “Finished kitchen renovation showing white cabinets and marble countertops.” Focus on information the image contributes to understanding.

For functional images (images that are links or buttons), describe the function rather than appearance. A magnifying glass icon used as a search button should have alt=“Search” not alt=“magnifying glass icon.”

For decorative images that provide no information, use empty alt text (alt=""). Screen readers skip these images entirely. Decorative images include background patterns, visual separators, and images whose content is already conveyed in adjacent text.

For complex images (charts, diagrams, infographics), alt text provides a brief description with longer description available separately. The alt text might summarize the key point while aria-describedby references detailed description elsewhere.

Key Considerations

• Keep alt text concise, typically under 125 characters
• Describe information or function, not just appearance
• Avoid starting with “image of” or “picture of” since screen readers announce the image role
• Use empty alt for decorative images, never omit the alt attribute entirely
• Consider context: what information does this image add here?
• Do not repeat caption text in alt text
• Provide longer descriptions for complex images through separate mechanisms

Common Questions

When should alt text be empty versus detailed?

Empty alt text suits images that add no information: decorative borders, aesthetic photographs that repeat adjacent text content, and visual flourishes. Screen readers skip these, avoiding unnecessary announcements.

Detailed alt text suits images that convey information, serve as actions, or would leave gaps in understanding if removed. Product photos, instructional diagrams, and team member headshots need meaningful descriptions.

How should charts and data visualizations be handled?

Charts require both brief alt text and extended description. The alt text might state the key finding: “Bar chart showing sales increased 40% from 2024 to 2025.” The extended description provides the actual data.

Extended descriptions can use aria-describedby to reference a visually hidden data table or text description. Alternatively, provide a visible “view data” link. The goal is ensuring the information conveyed visually is available textually.

Should alt text include keywords for SEO?

Alt text should prioritize accessibility over SEO. Keyword stuffing creates poor screen reader experiences. While accurate, descriptive alt text may naturally include relevant terms, the primary purpose is conveying image content to users.

Search engines also value genuine alt text over keyword-stuffed alternatives. Well-written alt text that serves users typically serves SEO adequately.

Summary

Image alt text guidelines ensure screen reader users receive information equivalent to what images convey visually. Effective alt text describes purpose and content concisely, uses empty alt for decorative images, and provides extended descriptions for complex graphics. Context determines appropriate alt text for each image use.