Code Fix Guide

How to Fix Missing Alt Text on Images

Missing alt text on images is the single most common HTML accessibility error, found on over 55% of all websites. Screen readers announce images without alt text as 'image' or read the filename, making your site unusable for blind users — and exposing you to ADA lawsuits.

Common Errors and How to Fix Them

Image with no alt attribute at all

Problem

<img src="team-photo.jpg">

Fix

<img src="team-photo.jpg" alt="Marketing team meeting in conference room">

Alt text that's not descriptive enough

Problem

<img src="logo.png" alt="logo">

Fix

<img src="logo.png" alt="AcmeCorp company logo">

Generic alt text that doesn't describe the image

Problem

<img src="banner.jpg" alt="image">

Fix

<img src="banner.jpg" alt="Summer sale: 50% off all products through August">

Decorative image that should have empty alt

Problem

<img src="divider.png">

Fix

<img src="divider.png" alt="" role="presentation">

Why This Matters

Missing alt text violates WCAG 1.1.1 (Non-text Content), the most fundamental accessibility requirement. It's also the violation most commonly cited in ADA lawsuits. Every meaningful image needs descriptive alt text, and every decorative image needs an empty alt attribute (alt="").

Related WCAG Criteria

1.1.1Non-text Content

Level A — Perceivable

Find All Your Accessibility Issues Automatically

ADA CodeFix scans your website for WCAG 2.1 AA violations and generates AI-powered code fixes — not vague descriptions, actual code you can copy-paste.

Scan Your Site Free

No credit card required AI-generated code fixes

More Code Fix Guides

How to Fix Low Color Contrast in CSS

Low color contrast is found on 80%+ of websites. Learn the WCAG contrast ratios, test your colors, and fix CSS contrast issues with code examples.

How to Fix Missing Form Input Labels

Form fields without labels are inaccessible to screen reader users. Learn how to properly label inputs with HTML label elements and ARIA attributes.

How to Fix Empty Links and Buttons

Empty links and buttons with no accessible text are a top accessibility violation. Learn how to add descriptive text and ARIA labels with code examples.

How to Fix HTML Heading Structure

Skipped heading levels and missing H1 tags hurt both SEO and accessibility. Learn how to create a proper H1-H6 hierarchy with code examples.

How to Fix Keyboard Navigation and Focus Issues

If your website can't be navigated with a keyboard, it's inaccessible. Learn how to fix tab order, focus styles, keyboard traps, and custom components.

How to Fix ARIA Attribute Errors

Incorrect ARIA attributes can make accessibility worse, not better. Learn the most common ARIA mistakes and how to fix them with proper code examples.