Krunkit
Accessibility
Alt Text
WCAG
Web Development

Image Accessibility Guide: Writing Effective Alt Text and Meeting WCAG Standards

Learn how to make images accessible to all users. Covers writing effective alt text, decorative vs informative images, WCAG 2.1 requirements, screen reader behavior, and building accessible image galleries.

Krunkit Team··13 min read

Why Image Accessibility Matters More Than You Think

Images make up roughly 50% of the average webpage's total weight, and they carry a significant share of a page's meaning. When those images are inaccessible, a substantial portion of your audience is locked out of your content. According to the World Health Organization, over 2.2 billion people globally have some form of vision impairment. Add to that users on slow connections who disable images, search engine crawlers that rely on text descriptions, and people using voice assistants — and the case for image accessibility becomes impossible to ignore.

Accessibility is not a checkbox exercise. It is a fundamental aspect of quality web development. In this guide, we will walk through everything you need to know about making images work for everyone: writing meaningful alt text, understanding the difference between decorative and informative images, meeting WCAG 2.1 requirements, and building accessible galleries.

Understanding Alt Text: The Basics

The alt attribute on an <img> tag provides a text alternative for the image. When a screen reader encounters an image, it reads this text aloud. When an image fails to load, the browser displays the alt text instead. Search engines use it to understand image content.

Here is a simple example:

<img src="golden-retriever-park.jpg" alt="A golden retriever playing fetch in a sunny park" />

What Makes Good Alt Text

Good alt text is concise, specific, and contextual. It describes what the image conveys in the context where it appears — not just what the image literally contains.

Consider an image of a bar chart showing website performance metrics:

| Alt Text | Quality | Why | |----------|---------|-----| | "Chart" | Poor | Too vague, conveys nothing | | "Bar chart" | Poor | Slightly better, still useless | | "Bar chart showing page load times" | Okay | Describes the chart type and topic | | "Bar chart: average page load time decreased from 4.2s to 1.8s after image optimization" | Excellent | Conveys the actual data and meaning |

The best alt text communicates the purpose of the image, not just its appearance.

Length Guidelines

There is no hard character limit for alt text, but practical guidelines help:

  • Aim for 80–150 characters for most images. This is enough to be descriptive without being overwhelming.
  • Screen readers like JAWS and NVDA will read the entire alt text, but excessively long descriptions (300+ characters) can frustrate users who cannot skip ahead easily.
  • If an image requires a lengthy description (like a complex infographic), use alt for a summary and provide the full description elsewhere using aria-describedby or a linked text alternative.
<figure>
  <img
    src="infographic-web-performance.png"
    alt="Infographic summarizing 10 web performance best practices. Full description below."
    aria-describedby="perf-description"
  />
  <figcaption id="perf-description">
    <!-- Detailed description here -->
  </figcaption>
</figure>

Decorative vs. Informative Images

This is the single most important distinction in image accessibility. Getting it wrong leads to either missing information or unnecessary noise for screen reader users.

Informative Images

An image is informative when it adds meaning that is not available in the surrounding text. These images must have descriptive alt text.

Examples of informative images:

  • Product photos on an e-commerce site
  • Charts, graphs, and data visualizations
  • Screenshots in a tutorial
  • Photos in a news article
  • Icons that serve as the only indicator of functionality

Decorative Images

An image is decorative when it adds no new information — it exists purely for visual appeal. These images should have an empty alt attribute (alt=""), which tells screen readers to skip them entirely.

Examples of decorative images:

  • Background patterns and gradients
  • Divider lines and spacers
  • Stock photos used purely for aesthetics alongside text that already conveys the message
  • Icons next to text labels that already describe the action
<!-- Decorative: the text already says "Search" -->
<button>
  <img src="search-icon.svg" alt="" />
  Search
</button>

<!-- Informative: the icon IS the label -->
<button aria-label="Search">
  <img src="search-icon.svg" alt="Search" />
</button>

The Gray Area

Some images fall between decorative and informative. A common example is a hero image on a blog post. If the hero image is a generic stock photo of a laptop on a desk, and the article's title and text fully convey the content, the image is decorative. But if the hero image shows a specific screenshot that the article discusses, it is informative.

When in doubt, provide alt text. It is better to give a brief description than to skip an image that carries meaning.

WCAG 2.1 Requirements for Images

The Web Content Accessibility Guidelines (WCAG) 2.1 at Level AA — the standard most organizations target — includes several success criteria directly related to images.

1.1.1 Non-text Content (Level A)

This is the foundational requirement. Every non-text element must have a text alternative that serves the equivalent purpose. For images, this means:

  • Informative images need descriptive alt text
  • Decorative images need alt=""
  • Complex images (charts, diagrams) need both a short alt and a longer description
  • Images of text should be avoided; when unavoidable, the alt must contain the same text
  • CAPTCHA images must provide alternative methods of verification

1.4.5 Images of Text (Level AA)

Text should not be rendered as an image except for logotypes or cases where a particular visual presentation is essential. This criterion exists because images of text cannot be resized, reflowed, or customized by users who need different fonts, spacing, or colors.

Instead of creating an image that says "50% Off Summer Sale," use styled HTML text:

<!-- Bad: image of text -->
<img src="sale-banner.png" alt="50% Off Summer Sale" />

<!-- Good: real text, styleable and accessible -->
<div class="sale-banner">
  <h2>50% Off Summer Sale</h2>
</div>

1.4.11 Non-text Contrast (Level AA)

Meaningful graphical elements — icons, chart segments, form field borders — must have a contrast ratio of at least 3:1 against their background. This is separate from the 4.5:1 ratio required for text.

This applies to:

  • Icons that convey information (status indicators, navigation icons)
  • Chart lines, bars, and segments
  • Interactive component borders (buttons, inputs)
  • Custom focus indicators

1.4.3 Contrast for Text in Images (Level AA)

When images contain text — screenshots, annotated images, diagrams with labels — that text must meet the same 4.5:1 contrast ratio as regular text (3:1 for large text, 18pt or 14pt bold).

How Screen Readers Handle Images

Understanding screen reader behavior helps you write better alt text and avoid common pitfalls.

Reading Behavior

When a screen reader encounters an <img> element:

  1. With alt text: It announces "image" (or "graphic") followed by the alt text. Example: "Image: A golden retriever playing fetch in a sunny park"
  2. With alt="": It skips the image entirely. The user never knows it exists.
  3. Without alt attribute: It falls back to reading the filename, which produces announcements like "Image: DSC_0847_final_v2_cropped.jpg" — a terrible experience.
  4. With role="presentation": Same as alt="", the image is skipped.

Common Screen Readers and Their Behaviors

| Screen Reader | Platform | Image Handling | |--------------|----------|----------------| | NVDA | Windows | Reads alt text; can be configured to announce all images or only those with alt | | JAWS | Windows | Reads alt text; offers "graphics mode" to navigate between images | | VoiceOver | macOS/iOS | Reads alt text; on iOS, can use ML to describe images lacking alt text | | TalkBack | Android | Reads alt text; integrates with Google's image recognition for undescribed images |

The Filename Fallback Problem

The number one image accessibility mistake on the web is the missing alt attribute. Not alt="" (which is intentional and correct for decorative images), but a completely absent alt attribute. This forces screen readers to read filenames, producing gibberish.

A 2025 WebAIM analysis of the top one million websites found that 55.2% of images were missing alt text — a persistent problem despite decades of awareness.

Color Contrast in Images

Images often contain information conveyed through color: heat maps, status indicators, charts with color-coded segments. Making these accessible requires deliberate effort.

Do Not Rely on Color Alone

WCAG 1.4.1 (Use of Color) requires that color is not the sole means of conveying information. In practice:

  • Charts should use patterns, labels, or different shapes in addition to color
  • Status indicators should include text or icons alongside color (a red dot alone is insufficient; a red dot with an "Error" label works)
  • Heat maps should include a legend and, ideally, data labels

Ensuring Sufficient Contrast

When creating images that contain text or meaningful graphical elements, verify contrast ratios using tools like:

  • WebAIM Contrast Checker — quick manual checks
  • Colour Contrast Analyser (CCA) — desktop app with an eyedropper tool for sampling colors directly from images
  • Stark — design tool plugin (Figma, Sketch) for checking contrast during design

For screenshots and UI images that you are optimizing for the web, be mindful that heavy compression can reduce contrast, particularly in areas with subtle color differences. When using tools like Krunkit to compress screenshots, preview the result to ensure text and UI elements remain clearly legible.

Building Accessible Image Galleries

Image galleries present unique accessibility challenges. Users need to browse, navigate, and understand multiple images in sequence.

Keyboard Navigation

Every image in a gallery must be reachable and operable via keyboard:

  • Use tabindex="0" on interactive gallery items (or use native <button> elements)
  • Support arrow keys for navigating between images in a grid
  • Ensure the lightbox/modal can be opened with Enter and closed with Escape
  • Trap focus inside the lightbox when it is open
  • Return focus to the triggering element when the lightbox closes
<div role="grid" aria-label="Photo gallery: Product images">
  <div role="row">
    <div role="gridcell">
      <button
        aria-label="View full size: Front view of product"
        onclick="openLightbox(0)"
      >
        <img src="product-front-thumb.jpg" alt="Front view of product" />
      </button>
    </div>
    <!-- More cells -->
  </div>
</div>

ARIA Roles and Labels

  • Use role="grid" or a <ul> with role="list" for the gallery container
  • Provide an aria-label on the container describing what the gallery contains
  • In a lightbox, use role="dialog" with aria-label
  • Include navigation: "Image 3 of 12" using aria-live="polite" for dynamic updates

Thumbnails vs. Full Images

Thumbnails should have the same alt text as their full-size counterparts. Do not use alt text like "Thumbnail of product" — the user does not care about the image size; they care about the content.

Lazy Loading and Accessibility

Lazy loading images (using loading="lazy" or Intersection Observer) is excellent for performance but should not affect accessibility. Ensure that:

  • Alt text is present on the <img> element from the start, even before the image loads
  • Placeholder elements are not announced as images by screen readers
  • The layout does not shift unpredictably as images load (use explicit width and height attributes)

Practical Alt Text Examples by Image Type

Product Photos

<!-- E-commerce -->
<img src="shoe.jpg" alt="Nike Air Max 90 in white and red, side profile view" />

<!-- Not just "Shoe" or "Nike shoe" — be specific about what the customer sees -->

Screenshots and Tutorials

<!-- Step in a tutorial -->
<img
  src="settings-panel.png"
  alt="Browser settings panel with the 'Clear browsing data' option highlighted"
/>

Team/People Photos

<!-- About page -->
<img src="team.jpg" alt="The engineering team at a whiteboard during a sprint planning session" />

<!-- Avoid describing physical appearance unless it is relevant to the content -->

Charts and Graphs

<img
  src="performance-chart.png"
  alt="Line chart showing Core Web Vitals LCP improving from 3.8 seconds to 1.2 seconds over six months after implementing image optimization"
/>

Icons in Navigation

<!-- Icon-only button: alt text is critical -->
<button>
  <img src="hamburger-menu.svg" alt="Open navigation menu" />
</button>

<!-- Icon with visible label: decorative -->
<a href="/settings">
  <img src="gear-icon.svg" alt="" />
  Settings
</a>

Testing Your Image Accessibility

Manual Testing

  1. Disable images in your browser (or use a browser extension) and navigate your site. Can you still understand all the content?
  2. Use a screen reader for at least 15 minutes. On macOS, VoiceOver is built in (Cmd + F5). On Windows, download NVDA for free.
  3. Tab through your image galleries and interactive image elements. Is everything reachable and operable?

Automated Testing

Automated tools catch the low-hanging fruit — missing alt attributes, empty alt on images that are likely informative, images of text:

  • axe DevTools (browser extension) — comprehensive WCAG audit
  • Lighthouse (built into Chrome) — includes accessibility scoring
  • WAVE (web-based) — visual overlay showing accessibility issues

Automated tools typically catch about 30–40% of accessibility issues. The rest require manual testing and judgment — particularly whether alt text is actually meaningful in context.

Continuous Integration

Add accessibility checks to your CI pipeline:

# Using axe-core with a test runner
npm install --save-dev @axe-core/cli
npx axe https://your-site.com/page --tags wcag2a,wcag2aa

Common Mistakes to Avoid

  1. Starting alt text with "Image of" or "Picture of" — Screen readers already announce that it is an image. Writing "Image of a sunset" results in the announcement "Image: Image of a sunset."

  2. Using the same alt text for every product image — If you have five views of a product, each one should describe what that specific view shows.

  3. Putting keywords into alt text for SEO — Alt text should describe the image for users, not stuff keywords for search engines. Search engines are sophisticated enough to detect keyword stuffing, and it degrades the experience for screen reader users.

  4. Forgetting about CSS background images — Images set via background-image in CSS have no alt attribute mechanism. If these images are informative, you need to use role="img" and aria-label on the containing element.

  5. Ignoring SVG accessibility — Inline SVGs need a <title> element and role="img" with aria-labelledby pointing to the title.

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Monthly revenue trend showing 15% growth</title>
  <!-- SVG content -->
</svg>

Wrapping Up

Image accessibility is not about following a checklist — it is about communicating effectively with all of your users. Every time you add an image to a webpage, ask yourself: What does this image communicate? If the answer is "nothing beyond decoration," use alt="". If it communicates something, describe that something clearly and concisely.

The web is a visual medium, but it does not have to be an exclusively visual one. With thoughtful alt text, proper ARIA roles, sufficient color contrast, and keyboard-navigable galleries, your images can serve everyone — regardless of how they experience the web.

Start with an audit of your existing images. Tools like WAVE and axe can identify the missing alt attributes in minutes. Then work through each one, applying the principles from this guide. Your users — all of them — will thank you.