What Is Alt Text and Why Does It Matter?

What Is Alt Text?

Alt text — short for alternative text — is a written description of an image that lives inside the HTML code of a web page. It is specified using the alt attribute on the <img> element, and it serves a deceptively simple purpose: it tells people and machines what an image contains when the image itself cannot be seen.

Here is what alt text looks like in practice:

<img src="golden-retriever-park.jpg" alt="A golden retriever catching a frisbee in a sunny park" />

When a browser cannot load the image, it displays this text instead. When a screen reader encounters the image, it reads the description aloud. When a search engine crawls the page, it uses the alt text to understand what the image depicts. That single attribute quietly powers three critical experiences at once — fallback display, assistive technology, and search engine optimization.

If you have ever hovered over a broken image icon and seen a line of text, you have already seen alt text at work. But its real impact extends far beyond that moment.

A Brief History of the Alt Attribute

The alt attribute has been part of the web almost as long as images have. When HTML 2.0 was formally specified in 1995 (RFC 1866), the alt attribute was included as a required attribute on the <img> tag. The reasoning was straightforward: not every user would be browsing with images enabled, and text-only browsers like Lynx needed a way to convey visual content.

Over the following decade, the attribute evolved from a technical nicety into a legal and ethical requirement:

• 1999 — The Web Content Accessibility Guidelines (WCAG) 1.0 were published by the W3C, establishing alt text as a Priority 1 checkpoint.
• 2008 — WCAG 2.0 introduced the four principles of accessibility (Perceivable, Operable, Understandable, Robust) and formalized image text alternatives under Success Criterion 1.1.1.
• 2018 — WCAG 2.1 extended the guidelines with additional criteria for mobile and cognitive accessibility, while keeping 1.1.1 as a foundational Level A requirement.
• 2023 — WCAG 2.2 was published as a W3C Recommendation, reaffirming all existing text-alternative requirements.

Throughout this timeline, legislation caught up. The Americans with Disabilities Act (ADA) in the United States, the European Accessibility Act (EAA) in the EU, and similar laws in Canada, the UK, and Australia now reference WCAG conformance — making alt text not just a best practice but a legal obligation for many organizations.

WCAG 2.1 Requirements for Alt Text

The core accessibility requirement for alt text lives in Success Criterion 1.1.1: Non-text Content, classified at Level A — the minimum conformance level. Here is what it states in plain terms:

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.

This applies to every meaningful image on a page: photographs, illustrations, icons that convey information, charts, infographics, and screenshots. The guideline recognizes several specific situations:

1. Informative images — Must have alt text that conveys the same information the image provides.
2. Functional images (e.g., an image used as a button) — Alt text must describe the function, not the image. A magnifying glass icon in a search button should have alt="Search", not alt="magnifying glass".
3. Complex images like charts and diagrams — Require both a short alt text summary and a longer description, often provided via a <figcaption> or a linked detailed description.
4. Decorative images — Must use an empty alt attribute (alt="") so screen readers skip them entirely.
5. Images of text — Should be avoided where possible, but when used, the alt text must contain the same text shown in the image.

Failure to meet Success Criterion 1.1.1 means a site cannot claim any level of WCAG conformance. It is a gating requirement — and one of the most frequently failed. The WebAIM Million study (2025) found that 54.5% of home pages had images with missing alt text, making it the second most common accessibility error on the web.

Why Alt Text Matters for SEO

Search engines cannot see images the way humans do. Despite significant advances in computer vision, Google still relies on alt text as a primary signal for understanding image content and its relationship to the surrounding page.

Here is how alt text influences search performance:

Google Images Traffic

Google Images accounts for roughly 22.6% of all web searches according to SparkToro data. Every image with well-written alt text is a potential entry point to your site. Without alt text, those images are effectively invisible to image search.

Contextual Ranking Signals

Google's own documentation states:

"Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image."

Alt text does not exist in isolation — it reinforces the topical relevance of your page. An article about hiking trails in Colorado with images tagged alt="View from the summit of Longs Peak at sunrise" sends a stronger contextual signal than the same article with alt="IMG_4392.jpg" or no alt text at all.

Core Web Vitals and Page Experience

While alt text itself does not directly affect Core Web Vitals scores, missing alt attributes trigger accessibility audit failures in Lighthouse and similar tools. These failures can indirectly affect your site's perceived quality, especially as Google continues to weigh page experience in ranking decisions.

Rich Results and Visual Search

Properly described images are more likely to appear in featured snippets, knowledge panels, and Google Lens results. As visual search grows — Google reported a 30% year-over-year increase in Lens queries in recent years — alt text becomes an increasingly important pathway to discovery.

Good vs. Bad Alt Text: Real Examples

The difference between useful alt text and poor alt text often comes down to specificity and context. Here are concrete examples across common image types:

Product Images

The good example includes the brand, model, color, and perspective — exactly the kind of detail a shopper or search engine needs.

People and Portraits

Describe what people are doing and the context, not just that people exist in the frame.

Charts and Data Visualizations

For charts, the alt text should communicate the takeaway, not just the chart type. The detailed data can live in a longer description or a data table.

Logos

Logos are a special case. Keep it simple — the company or brand name is almost always sufficient. There is no need to describe the visual design of the logo unless the design itself is the topic of discussion.

Screenshots and UI Elements

Screenshots should describe what the user would see and learn from the image, especially in tutorials and documentation.

Infographics

For complex infographics, pair a concise alt text with a full text transcript or description elsewhere on the page.

When to Use Empty Alt Text

Not every image needs a description. Decorative images — those that add visual interest but carry no informational content — should use an empty alt attribute:

<img src="decorative-divider.svg" alt="" />

This tells screen readers to skip the image entirely, which is the correct behavior. Without the alt attribute at all, many screen readers will announce the file name instead, creating a confusing experience like hearing "decorative-divider-dot-svg" in the middle of a paragraph.

Common examples of decorative images:

• Background textures and patterns
• Ornamental borders and dividers
• Icons that are redundant with adjacent text (e.g., a phone icon next to a phone number that is already labeled)
• Purely atmospheric photographs that do not add meaning to the content

The key question to ask is: if this image were removed, would the user miss any information? If the answer is no, use alt="".

It is important to include the alt attribute even when empty. An <img> tag with no alt attribute at all is an accessibility violation. An <img> tag with alt="" is a deliberate, valid choice.

Common Alt Text Mistakes to Avoid

Even well-intentioned teams make recurring errors. Here are the most frequent ones:

• Starting with "Image of" or "Photo of" — Screen readers already announce that an element is an image. Adding these prefixes is redundant and wastes the listener's time.
• Keyword stuffing — Writing alt="best running shoes buy running shoes online cheap running shoes" harms both accessibility and SEO. Google's algorithms recognize and penalize keyword stuffing in alt text just as they do in body copy.
• Using the file name — alt="DSC_0042.jpg" conveys nothing. Always write human-readable descriptions.
• Writing alt text that is too long — Aim for 125 characters or fewer when possible. Screen readers like JAWS may truncate or split longer descriptions awkwardly. If more detail is needed, use a <figcaption> or longdesc.
• Ignoring context — The same image can require different alt text depending on where it appears. A photo of a coffee cup on a cafe's homepage might need alt="Freshly brewed cappuccino at Elm Street Cafe", while the same image on a page about latte art techniques might need alt="Rosetta latte art pattern in a white ceramic cup".

How to Audit Your Site's Alt Text

If you manage a site with hundreds or thousands of images, checking alt text manually is impractical. Here is a practical audit workflow:

1. Run a Lighthouse accessibility audit in Chrome DevTools to catch missing alt attributes on a single page.
2. Use a site crawler like Screaming Frog or Sitebulb to scan your entire site and export a list of images with missing or duplicate alt text.
3. Prioritize by page traffic — Fix alt text on your highest-traffic pages first for the greatest SEO and accessibility impact.
4. Review for quality — Having alt text is not enough. Review descriptions for accuracy, specificity, and appropriate length.
5. Automate going forward — For sites with large image libraries or frequent uploads, manual alt text writing does not scale.

This is where tools like AltFrame become invaluable. AltFrame uses AI to generate accurate, context-aware alt text for images at scale — whether you are processing a backlog of thousands of untagged product photos or integrating alt text generation into your CMS workflow so every new image ships with a description from day one. It handles the volume problem without sacrificing the quality that both screen reader users and search engines depend on.

Alt Text Checklist

Before publishing any page, run through this quick checklist:

• Every informative image has descriptive, specific alt text
• Decorative images use alt=""
• No alt text starts with "image of" or "picture of"
• Functional images describe the action, not the appearance
• Complex images have both short alt text and a longer description
• Alt text is under 125 characters where possible
• No keyword stuffing
• Alt text is contextually appropriate for the page it appears on

Final Thoughts

Alt text is one of the smallest details in web development and one of the most consequential. It sits at the intersection of accessibility, search engine optimization, and user experience — three disciplines that increasingly share the same goal: making content available to everyone, regardless of how they access it.

Getting alt text right is not difficult for a handful of images. The challenge is doing it consistently across hundreds or thousands of pages, season after season, as new content is published and old content is updated. Whether you write it by hand, use AI-powered tools like AltFrame to generate it at scale, or combine both approaches, the important thing is that every meaningful image on your site has a text alternative that serves its purpose.

Your images have something to say. Alt text gives them a voice.