Alt Text for Images

<img src="https://images.unsplash.com/photo-1557683316-973673baf926?auto=format&fit=crop&q=80&w=800" alt="hero banner">

<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800" alt="Bar chart showing a 40% increase in sales Q3.">

img(src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800" alt="Bar chart showing a 40% increase in sales Q3.")

<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800" alt="Bar chart showing a 40% increase in sales Q3." />

<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800" alt="Bar chart showing a 40% increase in sales Q3." />

<img 
  src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800" 
  alt="Bar chart showing a 40% increase in sales Q3."
  class="w-full h-auto rounded-lg shadow-md border border-slate-200"
/>

The Standard

The alt attribute provides a text alternative for images. Without it, screen readers either skip the image entirely or read the file name—often a jumbled mess like “IMG_2048.jpg”.

WCAG Criteria

• 1.1.1 Non-text Content (Level A): All non-text content must have a text alternative that serves the equivalent purpose.

❌ The Bad (Inaccessible)

What’s Wrong?

1. Missing alt: The browser may read the file path, which is useless.
2. Lazy alt: “image” tells the user nothing. What kind of image?

✅ The Good (Accessibility-Ready Code)

<!-- ✅ Describe the content of the image -->
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800" alt="Bar chart showing a 40% increase in sales Q3.">

Why This Works

<!-- ✅ Describe the content of the image -->
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800" alt="Bar chart showing a 40% increase in sales Q3.">

<!-- ✅ An empty alt signals that the image is decorative -->
<img src="https://images.unsplash.com/photo-1502691876148-a84978f5d88b?auto=format&fit=crop&q=80&w=400" alt="">

<!-- ✅ The alt text describes the link destination, not the icon -->
<a href="/home">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>
  <span class="sr-only">Go to homepage</span>
</a>

Informative Image (Content-Rich)

<!-- ✅ Describe the content of the image -->
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800" alt="Bar chart showing a 40% increase in sales Q3.">

Decorative Image (No Content)

<!-- ✅ An empty alt signals that the image is decorative -->
<img src="https://images.unsplash.com/photo-1502691876148-a84978f5d88b?auto=format&fit=crop&q=80&w=400" alt="">

Functional Image (Inside a Link)

<!-- ✅ The alt text describes the link destination, not the icon -->
<a href="/home" class="home-link">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>
  <span class="sr-only">Go to homepage</span>
</a>

<!-- Informative image -->
<img src="https://images.unsplash.com/photo-1537151608828-ea2b11777ee8?auto=format&fit=crop&q=80&w=400" alt="A golden retriever playing in a park">

<!-- Decorative image -->
<img src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?auto=format&fit=crop&q=80&w=400" alt="">

Technical Deep Dive

The Accessibility Tree

With alt="" (correct):

Role: img (removed from tree)
Name: (none)

With meaningless alt (wrong):

Role: img
Name: "decorative swirl image"

Decision Flowchart

1. Does the image convey information? → Add descriptive alt text.
2. Is the image purely decorative? → Use alt="".
3. Is there adjacent text that describes it? → Use alt="" + aria-hidden="true".