# Images Missing Alt Text

**MUST** · **ID:** `content-rams-alt-text` · **Category:** content
**Source:** [RAMS](https://www.rams.ai/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-rams-alt-text

> MUST: All images must have alt attribute - descriptive for informative images, empty alt="" for decorative images. Screen readers announce images; missing alt creates confusion.

All images must have descriptive alt text for screen reader users

Rams lists this as a Critical accessibility check (WCAG 1.1.1) in its review table; the upstream skill is a checklist, so that terse row is the whole rule. Why it matters: images without alt text are invisible to screen reader users. Decorative images should carry alt="" so they are skipped, while meaningful images need text conveying their content and purpose.

## Bad — do not do this

`content-rams-alt-text-bad`

```tsx
export function RamsAltTextBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Image Missing Alt Text</h4>
        <div className="space-y-3">
          <div className="flex items-center gap-3 p-3 bg-muted rounded-lg">
            {/* eslint-disable-next-line jsx-a11y/alt-text */}
            <img
              src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=48&h=48&fit=crop"
              className="w-12 h-12 rounded-full object-cover"
            />
            <div>
              <p className="font-medium">John Smith</p>
              <p className="text-sm text-muted-foreground">Senior Developer</p>
            </div>
          </div>
          <div className="bg-muted rounded p-2 font-mono text-xs">
            <code className="text-error">{'<img src="..." />'}</code>
          </div>
        </div>
      </div>
      <p className="text-xs text-error">
        Screen reader may skip image or announce filename
      </p>
    </div>
  );
}
```

## Good — do this

`content-rams-alt-text-good`

```tsx
export function RamsAltTextGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Image with Alt Text</h4>
        <div className="space-y-3">
          <div className="flex items-center gap-3 p-3 bg-muted rounded-lg">
            <img
              src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=48&h=48&fit=crop"
              alt="John Smith, Senior Developer"
              className="w-12 h-12 rounded-full object-cover"
            />
            <div>
              <p className="font-medium">John Smith</p>
              <p className="text-sm text-muted-foreground">Senior Developer</p>
            </div>
          </div>
          <div className="bg-muted rounded p-2 font-mono text-xs">
            <code>alt="John Smith, Senior Developer"</code>
          </div>
        </div>
      </div>
      <p className="text-xs text-success">
        Screen reader announces: "John Smith, Senior Developer, image"
      </p>
    </div>
  );
}
```

## References

- [rams.md (skill source)](https://rams.ai/rams.md)
- [WCAG 1.1.1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html)