Alternative Text (Alt Text)

What is alternative text (alt text)?

Alternative text (often called alt text or the alt attribute) is a textual substitute for non-text content, especially images, on web pages. It serves to communicate the meaning or function of the image to users who cannot see it (for example, those using screen readers) and to provide a fallback when images fail to load.

It also supports search engines in understanding image content and thus contributes to SEO value.

How does alt text work?

In HTML, alt text is usually placed inside the alt attribute of an tag:

<img src="example.jpg" alt="Clym team reviewing web accessibility compliance">

When a screen reader reaches this image, it reads the description aloud. If the image fails to load or is blocked, the alt text may be displayed instead. Search engine crawlers also use this attribute to index image content.

Note: While the alt attribute is the most common method, sometimes a longer description may need to be provided via visible body text or a separate linked description.

Why is alt text important?

1. Accessibility: Alt text helps that all users, including those with visual, cognitive or other disabilities can access the information or function of images. It supports compliance with standards like WCAG 2.1 Success Criterion 1.1.1 (Non-text Content).

2. SEO & Discoverability: Since search engines cannot interpret images the way humans do, alt text provides context and helps pages rank better in image search and overall relevance.

3. Legal & Ethical Obligations: Failing to provide meaningful alt text may expose organisations to accessibility violations under laws such as the Americans with Disabilities Act (ADA) or the European Accessibility Act (EAA). Providing alt text is a simple yet key step in a broader accessibility and compliance programme.

Context Is Everything

The same image may require very different alt text depending on how it’s used.

For instance, consider a photograph of a person:

If the adjacent text already names them and describes their role, the alt text might be an empty string (alt="").

If the image itself conveys new information (e.g., the person’s achievement or context), the alt text should reflect that: e.g., “Astronaut Ellen Ochoa”. webaim.org

Key considerations:

What content does the image provide? What function does it have (informational, navigational, decorative)? Is the information already conveyed nearby in text (redundancy)? Does the context around the image change the appropriate description?

Best Practices & Common Pitfalls

Do:

Keep alt text succinct (often under ~125 characters) while conveying content and/or function.

Avoid phrases like “Image of …” or “Graphic showing …” unless the image type is significant. webaim.org

Ensure non-redundancy: if the image content is described fully in surrounding text, sometimes alt="" is appropriate.

Avoid:

Keyword-stuffing alt text for SEO gain (that degrades accessibility).

Using filenames (“img1234.jpg”) as alt text.

Omitting the alt attribute entirely, every must include an alt (even if empty).

Using images in CSS background that convey important content (because alt text cannot be applied to CSS imagery).

Implementing Alt Text in Context of Digital Compliance

All meaningful visuals have descriptive alt text.

Decorative elements are marked appropriately or removed.

Complex graphics are complemented by text or linked long descriptions.

Multilingual websites include alt text in the correct language. This kind of structured oversight supports both user inclusion and regulatory readiness.