Image Alt Text Accessibility Audit Guide

Image Alt Text Audit

WCAG criterion 1.1.1 (Non-text Content) is one of the most commonly tested and most frequently failed success criteria. Every non-text element must have a text alternative that serves an equivalent purpose.

Types of Images and Correct Alt Text

Informative images convey information:

• Alt text should describe the image content concisely
• Example: alt="Bar chart showing sales growth from $1M in 2022 to $3M in 2024"

Decorative images add visual interest but no information:

• Use empty alt: alt=""
• Or use CSS background-image instead
• Never use alt="decorative" or alt="image"

Functional images (inside links or buttons):

• Alt text describes the function, not the image
• Example: Search icon inside a button: alt="Search"

Complex images (charts, diagrams, infographics):

• Brief alt text plus a longer description
• Use aria-describedby pointing to a detailed text description
• Or provide a link to a text alternative

Image links:

• Alt text describes the link destination
• Example: Logo linking to homepage: alt="Company Name - Home"

Audit Process

For every <img>, <svg>, <canvas>, and CSS background image:

1. Is the image decorative? If yes, verify alt="" or role="presentation"
2. Is the image informative? If yes, verify alt text describes the information
3. Is the image functional? If yes, verify alt text describes the function
4. Is the image complex? If yes, verify a longer description is available
5. Is alt text too long? Keep under 125 characters when possible
6. Does alt text start with "image of" or "picture of"? Remove these — screen readers already announce it as an image

Common Failures

• Missing alt attribute entirely (screen readers read the filename)
• Alt text that says "image" or "photo" without description
• Decorative images with non-empty alt text (creates noise for screen reader users)
• Complex charts with only "chart" as alt text
• CMS-generated alt text using the filename