Alt Text

Overview

Alt text is a short text value entered into the alt attribute of an HTML <img> element that puts into words what an image shows visually. Think of it as the text that stands in for an image whenever that image can't be seen directly.

Alt text plays three main roles. First, accessibility: a screen reader announces the alt value in place of the image, so users with visual impairments can perceive the image's content and function. Second, image search: search engines use the alt text alongside the surrounding page context to understand what an image is about. Third, fallback display: when an image fails to load because of a network error, an unsupported format, or blocked content, the browser shows the alt text instead.

Best Practices

• Conciseness: Be accurate but brief. Capture only the essence of the image's content and, for a linked image, its function.
• Context awareness: If the surrounding text already describes the image, keep the alt text short; if the image is hard to grasp from context alone, describe it more fully.
• No keyword stuffing: Cramming the alt attribute with keywords harms the user experience and can be flagged as spam.
• Drop filler phrases: Words like "image of" or "photo of" are unnecessary, since a screen reader already announces that the element is an image.
• Decorative images: For purely decorative images that carry no informational value, use an empty alt (alt="") so screen readers skip them. Where possible, you can also handle these as CSS background images.
• Always include the alt attribute: Keep an alt attribute on every image, even when its value is empty.

Code Example

<!-- Recommended: describe specifically what the image shows -->
<img src="puppy.jpg" alt="Dalmatian puppy playing with a ball">

<!-- Not recommended: vague or empty -->
<img src="puppy.jpg" alt="dog">

<!-- Not recommended: keyword stuffing -->
<img src="puppy.jpg" alt="dog dog adoption dog photo puppy dog breeds">

<!-- Decorative image: empty alt -->
<img src="divider.png" alt="">

Rationale

• Google's image SEO documentation recommends alt text that is "useful, information-rich content that uses keywords appropriately and is in context," preferring a specific description such as alt="Dalmatian puppy playing with a ball" over alt="dog". It also states that keyword stuffing creates a negative experience and may be treated as spam.
• WebAIM explains that screen readers read alternative text in place of an image, and recommends that it be accurate and equivalent yet succinct, that it account for surrounding context, and that decorative images use alt="".
• MDN notes that the alt attribute is required and that the alternative text is shown in non-visual browsers, when images are set not to display, with unsupported formats, and on load errors. It advises handling decorative images with an empty alt.

Implementation Checklist

• Have you written alt text describing the content of every meaningful image?
• Is each description accurate yet concise?
• Does it avoid duplicating the surrounding text and fit the page context?
• Have you avoided listing keywords?
• Have you removed filler phrases like "image" or "photo"?
• Are decorative images handled with an empty alt (alt="")?
• Does every image have an alt attribute, even when its value is empty?

References & Sources

• Google Search Central — Google Images SEO best practices
• WebAIM — Alternative Text
• MDN — The Image Embed element (<img>)