# Text Alternatives

> Canonical HTML version: https://rocketvalidator.com/glossary/text-alternatives
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Text alternatives are textual substitutes for non-text content such as images, icons, videos, and controls, enabling people who cannot perceive the original content to understand its meaning and purpose through assistive technologies like screen readers.

Text alternatives provide a way for users to access information conveyed by non-text content when they cannot perceive it directly. This includes people who are blind or have low vision, those using text-only browsers, users with slow connections who disable images, and anyone relying on assistive technologies. WCAG 2.x Success Criterion 1.1.1 (Non-text Content) is a Level A requirement — the most fundamental level — mandating that all non-text content presented to the user has a text alternative that serves the equivalent purpose.

The concept of text alternatives extends far beyond the familiar `alt` attribute on images. It encompasses any technique that provides a textual equivalent for content that would otherwise be inaccessible: `alt` text on `<img>` elements, `aria-label` and `aria-labelledby` attributes on interactive controls, captions and transcripts for multimedia, text descriptions for charts and diagrams, and accessible names for form controls and buttons. The key principle is that the text alternative must convey the same information or function as the non-text content it replaces.

## Why text alternatives matter

Without text alternatives, significant portions of web content become invisible to a large segment of users. Screen readers announce images without `alt` text by reading the file name — often something meaningless like `IMG_20240315_001.jpg` or `hero-banner-v3-final.png`. Icon buttons without labels are announced as simply "button," leaving users guessing what action they perform.

Text alternatives affect:

- **Blind and low-vision users** who rely on screen readers to interpret visual content.
- **Users with cognitive disabilities** who may benefit from simpler text descriptions alongside complex visuals.
- **Search engines**, which index text alternatives to understand image and media content.
- **Users on slow connections** or those who disable images, who see `alt` text in place of images.
- **Voice control users** who need visible or accessible names to target interactive elements by speaking their labels.

Failure to provide text alternatives is the single most common accessibility barrier on the web. The WebAIM Million study consistently finds missing alternative text on a majority of homepages analyzed, making this a critical area for improvement.

## How text alternatives work

### Images

The `alt` attribute on `<img>` elements is the primary mechanism. The text should describe the purpose or content of the image in context. Decorative images that add no information should use an empty `alt=""` to signal assistive technologies to skip them.

### Interactive controls

Buttons, links, and form inputs need accessible names. When a button contains only an icon, it must have a text alternative provided via visually hidden text, `aria-label`, or `aria-labelledby`. Form inputs need associated `<label>` elements or equivalent ARIA attributes.

### Complex content

Charts, graphs, infographics, and diagrams often require both a short text alternative and a longer accessible description. Techniques include using `aria-describedby` to link to a detailed description, providing a data table equivalent, or using `<figure>` and `<figcaption>` for contextual descriptions.

### Multimedia

Video and audio content requires captions, transcripts, and audio descriptions. While these are covered by additional WCAG criteria (1.2.x), they are fundamentally text alternatives for time-based media.

### Choosing the right text alternative

The content of a text alternative depends on the context in which the non-text content appears. An image of a pie chart in a financial report needs a description of the data, while the same image used as a decorative thumbnail might need no alternative at all. A company logo linking to the homepage should have `alt` text like "Acme Corp — Home" rather than "logo."

## Code examples

### Bad: Image with no alt attribute

```html
<img src="quarterly-results-chart.png">
```

Screen readers may announce the file name, providing no useful information.

### Good: Image with descriptive alt text

```html
<img src="quarterly-results-chart.png"
  alt="Q3 2024 revenue chart showing 15% growth compared to Q2, reaching $4.2 million">
```

### Bad: Decorative image with non-empty alt text

```html
<img src="decorative-divider.svg" alt="decorative divider line between sections">
```

This forces screen readers to announce unnecessary information, cluttering the experience.

### Good: Decorative image with empty alt

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

### Bad: Icon button without a text alternative

```html
<button>
  <svg viewBox="0 0 24 24">
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
  </svg>
</button>
```

A screen reader announces this as "button" with no indication of its purpose.

### Good: Icon button with an accessible name

```html
<button aria-label="Open navigation menu">
  <svg aria-hidden="true" viewBox="0 0 24 24">
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
  </svg>
</button>
```

The `aria-label` provides the accessible name, and `aria-hidden="true"` on the SVG prevents the screen reader from attempting to interpret the graphic.

### Bad: Form input without a label

```html
<input type="email" placeholder="Enter your email">
```

Placeholder text disappears on input and is not reliably announced as a label by all screen readers.

### Good: Form input with a proper label

```html
<label for="email-field">Email address</label>
<input type="email" id="email-field" placeholder="you@example.com">
```

### Good: Complex image with figure and longer description

```html
<figure>
  <img src="org-chart.png"
    alt="Organization chart showing reporting structure"
    aria-describedby="org-chart-desc">
  <figcaption id="org-chart-desc">
    The CEO oversees three vice presidents: VP of Engineering,
    VP of Sales, and VP of Operations. Each VP manages between
    two and four department directors.
  </figcaption>
</figure>
```

Here the `alt` attribute provides a concise summary, while `aria-describedby` links to a detailed description for users who need more context. The `<figcaption>` also benefits sighted users by clarifying the diagram.