← Back to Accessalyze

How to Add Alt Text to Images

WCAG success criterion 1.1.1 requires non-text content to have a text alternative. Missing alt text is the most common WCAG violation — affecting around 58% of websites. For blind users who rely on screen readers, an image without alt text is invisible and meaningless.

The Basic Syntax

<img src="path/to/image.jpg" alt="Description of the image">

The alt attribute goes directly on the <img> element. There is no separate tag or workaround — alt is the correct and only mechanism for simple images.

Types of Images and What to Write

1. Informational Photos

Describe what the image shows — the content that matters, not the aesthetic.

2. Charts and Data Visualizations

Convey the data insight, not just what type of chart it is.

For complex charts, also provide a <details> element or a linked data table with the full dataset.

3. Decorative Images

Images that add visual flair but convey no information should use an empty alt attribute so screen readers skip them entirely.

Never omit the alt attribute entirely on a decorative image — some screen readers will read the filename instead.

4. Icons With Meaning

If an icon communicates something (a warning, a status, a category), it needs alt text.

If the icon is beside visible text that explains it, make the icon decorative: alt="".

5. Linked Images (Image Inside an Anchor)

When an image is inside a link, the alt text should describe the link destination, not the image appearance.

6. Image Buttons and Submit Buttons

<!-- FAIL: no alt -->
<input type="image" src="submit-btn.png">

<!-- PASS: describes button action -->
<input type="image" src="submit-btn.png" alt="Submit the registration form">

7. CSS Background Images

Background images applied with CSS cannot have alt text and are automatically treated as decorative. If a background image conveys information, it must be moved to an <img> element with proper alt text.

Alt Text Do's and Don'ts

• Do describe what the image communicates, not what it looks like
• Do use empty alt="" for decorative images
• Don't start with "image of", "picture of", "photo of" — screen readers already announce "image"
• Don't stuff keywords — alt text is for accessibility, not SEO gaming
• Don't exceed ~150 characters — use aria-describedby for longer descriptions
• Don't repeat surrounding text verbatim — it creates a redundant announcement

For Complex Images: aria-describedby

When a brief alt text cannot adequately describe a complex image (a diagram, infographic, org chart), use aria-describedby to point to a visible or hidden extended description:

<img src="accessibility-audit-flow.png"
     alt="Accessibility audit workflow diagram"
     aria-describedby="audit-flow-desc">

<p id="audit-flow-desc">
  The workflow starts with automated scanning, moves to manual keyboard
  testing, then screen reader testing, then a remediation sprint, and
  ends with a re-scan to verify fixes.
</p>

Testing Your Alt Text

• Run Accessalyze to find all images missing alt text on your site
• Use WAVE or axe DevTools in your browser for page-level checks
• Turn on a screen reader (VoiceOver on Mac, NVDA on Windows) and navigate images with the G key in NVDA or swipe through images in VoiceOver

← Back to Accessalyze · ← How to Check ADA Compliance