• June 1, 2025

Accessible Image Alt Text Compliance

Rule ID: image-alt
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549

How to Fix the Problem

To ensure digital content is accessible, all <img> elements must have appropriate alternative (alt) text that communicates the image’s purpose or meaning to screen reader users.

1. Provide Descriptive Alt Text for Informative Images

Use clear, concise, and meaningful descriptions. Alt text should reflect the purpose of the image within the context of the page.

Correct Usage Examples:

Avoid:

• Vague text like alt="image" or alt="picture"

• File names like alt="cat123.jpg"

• Redundant descriptors like alt="photo of a graph"

2. Mark Decorative Images with Empty Alt Attributes

If an image adds no informational value or is purely aesthetic, use:

This ensures assistive technologies ignore the image instead of reading irrelevant file names or paths.

3. Alternatives to alt

In specific cases, you can use ARIA to convey the same information:

Alt Text Writing Tips

When writing alternative text, ask:

• What is the image communicating?

• Why is it important in this context?

• How would I explain it to someone who can’t see it?

Use this approach to write meaningful and functional alt text that improves user experience and accessibility.

Why it Matters

Images without alt text create accessibility barriers for blind and visually impaired users. Screen readers cannot interpret visual content without accompanying textual alternatives. This prevents users from understanding key information, especially when the image communicates essential context, data, or navigation.

Improper use or omission of alt attributes results in:

• Confusing or incomplete user experience

• Potential compliance violations with WCAG and Section 508

• Missed content or functionality for users relying on assistive tech

Providing appropriate alt text ensures:

• Equal access to information

• Better compatibility with screen readers and braille displays

• An inclusive web experience for everyone

Rule Description

Every <img> element on a webpage must include meaningful alternative text that describes the image’s content and function. If the image is decorative, it must include a null alt attribute (alt="") to ensure it’s ignored by assistive technology.

The Algorithm (in simple terms)

The accessibility checker evaluates whether:

• Every <img> element includes an alt attribute (non-empty for informative images, empty for decorative ones)

• Alternatively, uses ARIA attributes (like aria-label or aria-labelledby) to provide a text alternative

• Images that should be ignored by screen readers include role="presentation" or role="none" as appropriate