Image Alt Text Best Practices for Accessibility and SEO

Why Alt Text Matters

Alternative text (alt text) is one of the most fundamental aspects of web accessibility. It provides a text equivalent for images, allowing people who cannot see images — whether due to visual impairments, slow internet connections, or broken image links — to understand the content and function of every image on your page.

Alt text serves multiple purposes: it is read aloud by screen readers, displayed when images fail to load, used by search engines to understand image content, and provides context for all users. Getting alt text right is essential for both WCAG compliance and SEO.

WCAG Requirements for Alt Text

Alt text primarily falls under WCAG 2.1 Success Criterion 1.1.1 (Non-text Content, Level A). This criterion requires that all non-text content has a text alternative that serves the equivalent purpose. This applies to:

• Photographs and illustrations
• Charts and graphs
• Icons and buttons
• Image maps
• Decorative images (which need empty alt text)
• CAPTCHAs (which need alternative identification methods)

Types of Images and Their Alt Text

Informative Images

Images that convey information not available in surrounding text need descriptive alt text that communicates the same information.

Example: A photo of a team working at computers in an office

• Bad: alt="image" or alt="photo"
• Poor: alt="office"
• Good: alt="Our development team collaborating on a project in the open-plan office"

Functional Images

Images used as links or buttons need alt text that describes the action or destination, not the image itself.

Example: A company logo that links to the homepage

• Bad: alt="logo.png"
• Poor: alt="Company logo"
• Good: alt="EAAPass - Return to homepage"

Decorative Images

Images that are purely decorative and add no information should have empty alt text so screen readers skip them. This is done with alt="" (not by omitting the alt attribute entirely).

Example: A decorative divider line or background pattern

• Bad: Omitting the alt attribute entirely
• Bad: alt="decorative image"
• Good: alt=""

Complex Images

Charts, graphs, infographics, and diagrams often contain too much information for a brief alt text. These need both a short alt text summary and a longer detailed description.

Example: A bar chart showing website traffic growth

<figure>
  <img src="traffic-chart.png"
       alt="Bar chart showing monthly website traffic from January to December 2025"
       aria-describedby="chart-details">
  <figcaption id="chart-details">
    Traffic grew from 10,000 visits in January to 85,000 in December,
    with the largest increase in September (+15,000) following the
    launch of our new accessibility features.
  </figcaption>
</figure>

Images of Text

WCAG 1.4.5 (Level AA) states that images of text should not be used when the same visual presentation can be achieved with styled text. When images of text are unavoidable (e.g., logos), the alt text must contain the same text shown in the image.

Alt Text Best Practices

Do

• Be concise: Aim for under 125 characters when possible. Screen readers may truncate very long alt text.
• Describe the purpose, not just the appearance: Consider why the image is there and what information it conveys in context.
• Consider the context: The same image might need different alt text depending on where it appears and what point it illustrates.
• Use natural language: Write as if you are describing the image to someone who cannot see it.
• Include text shown in the image: If the image contains readable text, include that text in the alt attribute.

Do Not

• Do not start with "Image of" or "Picture of": Screen readers already announce the element as an image. Starting with "image of" is redundant.
• Do not use file names: alt="IMG_2847.jpg" provides no useful information.
• Do not be too verbose: Alt text should be concise. If you need a long description, use aria-describedby or a linked description.
• Do not keyword stuff: Writing alt text solely for SEO without considering accessibility is a WCAG violation.
• Do not omit the alt attribute: A missing alt attribute is different from an empty alt attribute. Missing alt causes screen readers to read the file name.

Alt Text for SEO

Good alt text benefits SEO because search engines use it to understand image content and page relevance. Here is how to optimize for both accessibility and SEO:

• Be descriptive and natural: Well-written, descriptive alt text naturally includes relevant keywords without stuffing.
• Include context-relevant terms: If the image supports the topic of the page, the alt text will naturally contain relevant terms.
• Do not sacrifice accessibility for SEO: Alt text must first serve the user, then search engines. Keyword-stuffed alt text harms accessibility and can also trigger SEO penalties.
• Use unique descriptions: Each image should have unique alt text. Duplicate alt text across many images provides no additional SEO value and can harm user experience.

Alt Text for E-Commerce Product Images

Product images have specific alt text needs:

• Include the product name, brand, and key visual features
• For multiple views, describe what each view shows: "front view," "side view," "close-up of stitching detail"
• Include color and pattern information
• For size/scale images, describe the size context

Example:

• Bad: alt="product image 3"
• Good: alt="Navy blue cotton Oxford shirt, button-down collar, front view"

Testing Your Alt Text

Use a combination of automated and manual testing to verify your alt text:

1. Automated check: EAAPass identifies images with missing alt attributes, empty alt on informative images, and suspicious alt text patterns (like file names).
2. Manual review: Manually check that alt text is meaningful, accurate, and appropriate in context. Automated tools can detect missing alt text but cannot judge quality.
3. Screen reader test: Listen to your pages with a screen reader. Does the alt text provide a clear understanding of each image's purpose?

Start Improving Your Alt Text Today

Missing and poor alt text is consistently one of the most common accessibility issues on the web. EAAPass can scan your entire website and identify every image with missing or problematic alt text, giving you a clear list of images that need attention. Run your free audit now and start improving your alt text for both accessibility and SEO.