Alternative Text
Every meaningful image needs a text equivalent describing its purpose — not its appearance. Decorative images get alt="". 54% of homepages have images missing alt text.
A short written description of an image, so people who can't see it (and search engines) still know what it shows.
WCAG 1.1.1 (Level A) requires text alternatives for all non-text content. The key principle: describe the purpose, not the appearance.
Decision tree:
- Is it purely decorative? → alt=""
- Is it a link or button? → describe the destination or action
- Does it convey information? → describe that information
- Is it complex (chart, diagram)? → provide both short alt and a longer description
- Is it text rendered as an image? → the alt text IS the text
Why this matters
Missing alt text affects 54% of homepages. For screen reader users, an image without alt text is either completely invisible or announced as the filename ("IMG_20240315_compressed.jpg"). Linked images without alt text create links with no accessible name — a complete navigation barrier.
How to detect
Run an automated scan (axe, WAVE) to find missing alt attributes. Then manually review: does the alt text describe the image's purpose in context? Are decorative images marked alt=""? Are complex images (charts, infographics) described adequately?
How to fix
<!-- Informative image --> <img src="chart.png" alt="Sales grew 40% in Q3, reaching .4M" /> <!-- Linked image --> <a href="/home"> <img src="logo.svg" alt="Acme Corp — Back to homepage" /> </a> <!-- Decorative image --> <img src="divider.svg" alt="" /> <!-- Complex image with long description --> <figure> <img src="flowchart.png" alt="User registration flow" aria-describedby="flow-desc" /> <figcaption id="flow-desc">Step 1: Enter email. Step 2: Verify. Step 3: Set password. Step 4: Choose preferences.</figcaption> </figure>