Accessible Images

Images are the most common WCAG failure on government websites. Missing or poor-quality alt text blocks an entire class of users from the content. This guide covers every image type, how to write alt text that actually communicates, and the full set of WCAG success criteria that apply.

The five image types

The correct technique depends on what role the image plays in the content:

Writing good alt text

Alt text should convey the same information a sighted user gets from the image, not describe how it looks. Ask: if this image were removed, what information would be lost? Write that.

• Do: alt="Bar chart showing ADHD affects 10% of the US population"
• Don't: alt="Image", alt="Chart", alt="photo.jpg"
• Don't startwith “Image of” or “Photo of” — screen readers already announce the element as an image.
• Keep alt text under 150 characters. For complex images, put the full description in visible body text or a <details> element below.

Decorative images

An image is decorative when it adds no information not already present in surrounding text. Use both alt="" AND aria-hidden="true" — the empty alt tells the browser it is presentational, and aria-hidden removes it from the accessibility tree entirely:

<!-- Decorative illustration — no information value -->
<img
  src="/illustrations/working-together.svg"
  alt=""
  aria-hidden="true"
  width={420}
  height={300}
/>

Responsive images and contrast

Use <picture> with modern formats for performance, and always include a fallback <img> with alt text:

<picture>
  <source type="image/avif" srcSet="/images/logo.avif" />
  <source type="image/webp" srcSet="/images/logo.webp" />
  <img
    src="/images/logo.png"
    alt="A11y Equitas — home"
    width={120}
    height={185}
  />
</picture>

Images of text must have a contrast ratio of at least 4.5:1 against their background (SC 1.4.3). Avoid images of text entirely where possible — CSS text is always superior because it reflows, zooms, and translates.

WCAG 2.2 AAA image requirements

• SC 1.1.1 Non-text Content (A) — every non-text element must have a text alternative appropriate to its purpose.
• SC 1.4.5 Images of Text (AA) — do not use images of text unless purely decorative or the visual presentation is essential (logos).
• SC 1.4.9 Images of Text (No Exception) (AAA) — images of text are only acceptable for logos. No other exceptions.
• SC 2.3.1 Three Flashes or Below Threshold (A) — nothing on the page, including animated images and GIFs, may flash more than 3 times per second.
• SC 2.3.2 Three Flashes (AAA) — no flashing content of any size, period.
• SC 1.4.11 Non-text Contrast (AA) — meaningful parts of UI images (icons used as controls) must have 3:1 contrast against adjacent colors.

SVG images

SVGs used inline should have a <title> as the first child and role="img" on the <svg> element. Decorative inline SVGs should use aria-hidden="true" and focusable="false":

<!-- Informative inline SVG -->
<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">ADHD prevalence: 10% of US population</title>
  <!-- chart paths -->
</svg>

<!-- Decorative inline SVG (icon) -->
<svg aria-hidden="true" focusable="false" width="18" height="18">
  <!-- icon paths -->
</svg>

Testing checklist

• Disable images in browser — every removed image should display its alt text (or nothing, for decorative images).
• Navigate with NVDA or VoiceOver — confirm decorative images are not announced.
• Run axe-core — rule image-alt, image-redundant-alt, role-img-alt.
• Check all animated images (GIFs, animated SVGs) stop after 5 seconds or provide a pause control (SC 2.2.2).