"Alt" attribute (image alt text)

Last updated 17 June 2026 2 min

Alt text (short for "alternative text") is a written description of an image embedded in a page's HTML. It lives inside the <img> tag's alt attribute and serves multiple purposes: accessibility, SEO, and graceful fallback when an image fails to load.

<img src="ceramic-mug-blue.jpg" alt="Blue ceramic mug with handle on a wooden table">

Why it matters

Accessibility

Screen readers used by visually impaired users read alt text aloud. Without it, an image is invisible — or worse, the screen reader announces a meaningless filename like "IMG_4521.jpg". Alt text is a baseline requirement of WCAG (Web Content Accessibility Guidelines).

SEO

While search engines do use image recognition to understand the content of images, this is far from perfect. Alt text gives Google a textual signal about what the image depicts, which helps: - Image search rankings - Page topical relevance (especially when images are central to the content) - Specific context and focus for images that could be interpreted in different ways

Fallback

If the image fails to load — broken link, slow connection, blocking software — the browser displays the alt text in its place.

Writing good alt text

Be descriptive but concise. Aim for what's relevant about the image, not every minor detail. A short sentence is enough.
Match the image's purpose. A product photo's alt text should describe the product. A diagram's alt text should explain what the diagram shows.
Don't keyword-stuff. Repeating target keywords across every image is spammy and hurts accessibility. Only use keywords that genuinely describe the image.
Don't start with "Image of" or "Picture of". Screen readers already announce that it's an image.
Skip alt text for purely decorative images. Use alt="" (empty alt). This tells screen readers to ignore the image rather than reading a useless description.

Common mistakes

Leaving alt attributes off entirely (some screen readers will then read the filename).
Copy-pasting the same alt text across every image on a page.
Defaulting alt text to the image's filename.
Treating alt text as a hidden keyword field rather than a description.
Using alt text on background images set via CSS (CSS images can't have alt text — use ARIA labels if they convey meaning).

Disclaimer: All information contained herein is for informational purposes only. It is not advice or instructional.