Alt Text

Alt text (alternative text) is the text description embedded in an image's HTML alt attribute that screen readers announce in place of the image. It is the single most important accessibility technique for images. Good alt text conveys the content and function of an image. Bad alt text (or missing alt text) is a WCAG Level A failure and one of the most common accessibility defects on the web.

Category: Accessibility (also: Front End, Content Strategy)

Author: Atomic Glue Team

## Definition

Alt text is the value of the HTML alt attribute on an <img> element (or equivalent role="img" on SVG elements). It provides a text alternative that is announced by screen readers and displayed when the image fails to load. The alt attribute is required by the HTML specification, and omitting it creates a WCAG 2.1 Level A violation (1.1.1 Non-text Content). The correct content of alt text depends on the image's role in the page. Informative images need a concise description of the information they convey. Functional images (such as linked logos and icon buttons) need alt text describing the link destination or button action, not the image itself. Decorative images need alt="" (empty alt) to tell screen readers to skip them entirely. Writing good alt text is a skill. It must be concise, context-appropriate, and never begin with phrases such as "image of" or "picture of" because screen readers already announce the element as an image.

## The four types of images and their alt text rules

Informative images: the alt text must convey the information the image presents. A chart showing quarterly sales growth should describe the trend and key data points. Functional images: if an image is inside a link or button, the alt text must describe the link destination or button action, not the image. A logo linked to the homepage should have alt="Home". Decorative images: use alt="" to hide the image from screen readers. This includes spacer images, background-pattern images, and purely ornamental photos. Complex images (charts, graphs, infographics): the alt text provides a short summary, and the full data is provided separately (e.g., via a data table, longdesc, or adjacent text description).

## Common alt text mistakes

Missing alt attribute: WCAG Level A failure. Screen readers will announce the image filename or nothing. Alt="image" or alt="picture": useless. The user already knows it is an image. Alt="photo of a group of people standing in a room": too vague. Describe what is actually informative about the scene. Starting with "image of" or "picture of": redundant. Screen readers prefix the announcement with "image" automatically. Alt text on every decorative image: unnecessarily clutters the experience for screen reader users. Keyword-stuffed alt text for SEO: Google uses alt text for image search rankings, but stuffing keywords harms both accessibility and SEO because it signals low quality. Alt text on SVG with role="img": SVGs do not have an alt attribute. Use role="img" and aria-label for the text alternative.

## In code

<!-- Informative image -->
<img src="revenue-q3.png" alt="Q3 2026 revenue reached $2.4M, a 12% increase over Q2.">

<!-- Functional image (linked logo) -->
<a href="/">
  <img src="logo.svg" alt="Home">
</a>

<!-- Functional image (icon button) -->
<button>
  <img src="search-icon.svg" alt="Search">
</button>

<!-- Decorative image (skip for screen readers) -->
<img src="hero-bg.jpg" alt="">

<!-- Complex image (chart with full data table below) -->
<img src="chart.png" alt="Monthly active users by region, 2026. See data table below.">
<!-- Followed by a <table> with the actual data -->

<!-- Bad examples -->
<img src="logo.svg"><!-- Missing alt: WCAG failure -->
<img src="photo.jpg" alt="image"><!-- Useless -->
<img src="icon.svg" alt="image of a magnifying glass"><!-- Redundant and incomplete -->

## Common questions

Q: Should I write SEO keywords in alt text?

A: No. Write alt text that accurately describes the image's function and content for a person who cannot see it. Google's algorithms are sophisticated enough to understand image context from surrounding content and appropriately keyword-stuffed alt text reads as spam to both search engines and humans.

Q: What about decorative background images in CSS?

A: Images added via CSS background-image are already invisible to screen readers, which is correct for decorative images. No alt text is needed because there is no background-image alt attribute. Do not put informative content in CSS backgrounds. Use an <img> element with appropriate alt text instead.

## Key takeaways

• Alt text is the HTML alt attribute on images, required by spec and WCAG.
• Content depends on context: informative, functional, decorative, or complex.
• Use empty alt (alt="") for decorative images to hide them from screen readers.
• Never start with "image of" or "picture of". Screen readers announce that automatically.
• Keyword-stuffed alt text harms both accessibility and SEO.

## Related entries

• [Accessibility (a11y)](atomicglue.co/glossary/accessibility)
• [WCAG (2.1, 2.2)](atomicglue.co/glossary/wcag)
• [Semantic HTML](atomicglue.co/glossary/semantic-html-website-development)

Last updated July 2026. Permalink: atomicglue.co/glossary/alt-text-accessibility