Accessible Images: Alt Text, ARIA, WCAG Best Practices

What are accessible images?

Accessible images are images on a website that convey their meaning to all users — including those who can't see them (screen reader users, blind users, users with images disabled, search engines). The primary tool: the alt attribute. But proper image accessibility involves more nuance — when to use empty alt, how to describe complex images, and how ARIA fits in.

Image accessibility is required by WCAG (Web Content Accessibility Guidelines) — the international standard adopted by ADA in the US and EAA in the EU. Inaccessible images are a top cause of accessibility lawsuits.

The basic rule: every image needs alt

<!-- Informative image -->
<img src="chart-q4.png" alt="Q4 revenue grew 23% to $4.2M">

<!-- Decorative image -->
<img src="divider.png" alt="">  <!-- empty alt = decorative -->

<!-- BAD: missing alt -->
<img src="chart-q4.png">  <!-- screen reader announces filename -->

Three categories of images

How to write good alt text

• Describe the purpose, not the appearance. "Photo of CEO Alice Johnson smiling" → "CEO Alice Johnson".
• Be concise. 125 characters or less ideally; longer for complex images.
• Don't say "image of" or "photo of". Screen readers already announce it's an image.
• Match the context. Same image may need different alt on different pages.
• Skip filename-as-alt. alt="DSC_4521.jpg" is useless.
• Test with a screen reader. NVDA, JAWS, VoiceOver are free or cheap.

Decorative images: use empty alt

Background patterns, dividers, eye candy — anything that doesn't add information. Empty alt tells screen readers to skip:

<img src="ornament.png" alt="">
<!-- OR for CSS background images, no alt needed -->
<div class="hero" style="background-image: url('hero.jpg')">

If decorative image is in <picture> or has any aria-*, also use role="presentation" or aria-hidden="true".

Complex images: charts, infographics, diagrams

Short alt + long description elsewhere on page. Three patterns:

1. Long description in body text

<img src="sales-chart.png" alt="Quarterly sales chart, see data below">
<p>Q1: $1M; Q2: $1.2M; Q3: $1.5M; Q4: $4.2M (23% growth)...</p>

2. Hidden description with aria-describedby

<img src="chart.png" alt="Sales chart" aria-describedby="chart-desc">
<p id="chart-desc" class="visually-hidden">
  Quarterly sales: Q1 $1M, Q2 $1.2M...
</p>

3. Link to detailed description

<img src="diagram.png" alt="Network diagram">
<a href="/diagram-details">Detailed text description of network diagram</a>

SVG accessibility

<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Chart showing growth</title>
  <!-- SVG content -->
</svg>

<!-- For decorative SVG -->
<svg aria-hidden="true">
  <!-- ... -->
</svg>

Image accessibility best practices

• Every <img> has alt. Empty if decorative.
• Describe purpose, not pixels.
• Don't use images of text. Use real text styled with CSS — accessible AND zoomable.
• Captions for complex media. Visible to all users, helps everyone.
• Test with screen readers. Catch what visual review misses.
• Color isn't the only signal. Charts: pattern + color, not just color.
• Avoid CAPTCHA images. Or provide audio/text alternatives.
• Sufficient contrast for image overlays. Text on image = check contrast.

Common image accessibility pitfalls

• Missing alt entirely. Most common error. Linters catch this.
• Filename as alt. alt="IMG_4521.jpg".
• Redundant alt. Same as adjacent caption — screen reader reads twice.
• "Image of..." prefix. Screen reader already announces it.
• Alt on decorative images. Adds noise; should be empty.
• Long alt for complex. > 200 chars = use long description instead.
• Image-only buttons without alt. Magnifying glass icon button = no label = unusable.
• Background images with content. CSS background can't have alt; if it conveys info, use <img>.

Tools for testing image accessibility

FAQ: accessible images

Do I need alt on decorative images?

Yes — empty alt (alt=""). This tells screen readers to skip. Missing alt entirely (no attribute) makes them announce the filename.

Should alt include "image of"?

No. Screen readers already announce it's an image. Just describe the content.

How long should alt text be?

Concise — typically < 125 characters. Complex images: short alt + long description elsewhere.

What about background images in CSS?

If purely decorative: fine. If conveys content (e.g., text on hero): use <img> with alt instead.

Do I need alt on logo images?

Yes — typically the company name. alt="Acme Inc". If logo is purely decorative + name is in adjacent text, can be empty.

What's the WCAG requirement?

WCAG 2.1 Success Criterion 1.1.1 (Level A): all non-text content has a text alternative.

How does AI-generated alt text help?

Useful as a starting point but verify — AI may miss context, get details wrong. Treat as draft, not final.

Test image performance + accessibility with LoadFocus

LoadFocus runs Lighthouse audits from 25+ regions, flagging missing alt + oversized images that hurt both accessibility and Core Web Vitals. Sign up free at loadfocus.com/signup.