Images are the visual heartbeat of the web. They tell stories, convey data, set a mood, and guide users through content. But for the millions of people who use screen readers or have visual impairments, images can also be invisible barriers when they are not made accessible.

If an image conveys meaning and lacks a text alternative, that meaning is locked away from a significant portion of your audience. The good news is that making images accessible is one of the most straightforward and high-impact things you can do to improve your site. In this guide, we will walk through everything you need to know about alt text, accessible image formats, decorative graphics, complex images like charts and infographics, and the common mistakes that trip up even well-intentioned teams.

What Is Alt Text, and Why Does It Matter?

Alternative text, commonly called alt text, is a short written description of an image that is read aloud by screen readers in place of the image. It is added through the alt attribute on the <img> tag in HTML:

<img src="chart.png" alt="Bar chart showing 40% revenue growth in Q3 2026">

When a screen reader encounters this image, it reads the alt text aloud, giving the user the same essential information that a sighted user gets from glancing at the image. Without alt text, the screen reader might read the file name (“chart.png”) or simply announce “image,” leaving the user with no context at all.

Alt text matters because it restores parity. A sighted user sees a chart and instantly understands the trend. A screen reader user deserves the same opportunity to understand what the chart communicates. Alt text is the bridge.

The Three Categories of Images

Not every image needs the same kind of treatment. The first step in writing good alt text is understanding what role an image plays on the page. Images generally fall into three categories:

1. Informative Images

These images carry meaning that is not available in the surrounding text. Examples include photographs that illustrate a concept, icons that convey status, charts and graphs, and diagrams. These images require descriptive alt text.

Example: A photo of a person using a braille display on a page about assistive technology. The alt text should describe what the photo shows: “A person reading a braille display connected to a laptop.”

2. Decorative Images

Some images are purely decorative. They add visual appeal but carry no information. A decorative background pattern, a spacer image, or an illustration that simply reinforces the surrounding text does not need alt text. In fact, providing alt text for decorative images can be disruptive, because the screen reader interrupts the reading flow to announce something that adds no value.

For decorative images, use an empty alt attribute:

<img src="decorative-border.png" alt="">

This tells the screen reader to skip the image entirely.

3. Functional Images

These images serve as links or buttons. A logo that links to the home page, a magnifying glass icon in a search button, or a printer icon that triggers printing are all functional images. The alt text for these should describe the action, not the appearance.

Example: For a search button with a magnifying glass icon, the alt text should be “Search” rather than “Magnifying glass icon.”

How to Write Good Alt Text

Writing effective alt text is a skill. It is not about describing every pixel. It is about conveying the purpose and meaning of the image in context. Here are the principles to follow:

Be Concise

Alt text should be short. Aim for 100 characters or fewer when possible. If the image is simple, a few words may suffice. Screen reader users navigate content quickly, and long alt text can slow them down.

Good: “Students collaborating in a computer lab”

Too long: “Four students wearing backpacks sitting at desks in a computer lab with blue walls and fluorescent lighting, typing on laptops while looking at screens”

Be Accurate

Describe what the image actually shows, not what you wish it showed. If a photo shows a cluttered, disorganized workspace, do not describe it as tidy. Accuracy builds trust.

Avoid Redundancy

If the surrounding text already conveys the same information as the image, do not repeat it in the alt text. For example, if the paragraph above an image says “Our new office in downtown Chicago” and the image is a photo of that office, the alt text can be empty or very brief, because the caption already tells the story.

Do Not Start with “Image of” or “Picture of”

Screen readers already announce that the element is an image. Saying “Image of a dog” is redundant. Just say “A golden retriever playing fetch in a park.”

Focus on Purpose, Not Appearance

Ask yourself: why is this image here? What is the user supposed to take away from it? Write alt text that answers that question. A stock photo of a smiling customer on a testimonial page might just need alt text like “Customer testimonial portrait,” not a detailed physical description of the person.

Context Matters

The same image might need different alt text depending on where it appears. A photo of a doctor on a medical blog might need alt text like “A physician reviewing patient charts” on one page, but on an “About Our Team” page, the alt text should include the doctor’s name: “Dr. Sarah Chen, Chief of Cardiology.”

Handling Complex Images

Simple photos and icons are relatively easy to describe in a sentence or two. But what about charts, graphs, infographics, and diagrams? These complex images often carry large amounts of information that cannot be captured in a short alt attribute.

For Charts and Graphs

Provide a short summary in the alt text, then include the full data in the surrounding text or in a table nearby.

Alt text: “Bar chart showing quarterly revenue growth from 2023 to 2026”

Surrounding text: “Revenue grew steadily each quarter: Q1 2023 at $2.1M, Q2 2023 at $2.4M, Q3 2023 at $2.8M…” and so on. Alternatively, provide an accessible data table with the same information.

For Infographics

Infographics are notoriously difficult for accessibility because they pack dense information into a visual format. The best approach is to provide the same information in a structured text format below or alongside the infographic. Use the alt attribute for a brief summary and a longer description in the page content.

You can also use the longdesc attribute or a technique called aria-describedby to link to a separate page or section with a detailed text description, though well-structured in-page content is usually more reliable.

For Diagrams and Flowcharts

Describe the process or relationships the diagram represents in the surrounding text. For a flowchart, write out the steps in order. For an organizational chart, use a nested list to represent the hierarchy.

Common Image Accessibility Mistakes

Even teams that know they should write alt text often make these errors:

1. Forgetting Alt Text Entirely

This is the most common and most damaging mistake. An image with no alt attribute at all leaves screen reader users with nothing. Some screen readers will fall back to reading the file name, which is rarely helpful (nobody wants to hear “IMG_4827.jpg”).

2. Using Alt Text for SEO Instead of Accessibility

Alt text is sometimes stuffed with keywords for search engine optimization. This makes the alt text long, awkward, and unhelpful for the actual human beings who rely on it. SEO and accessibility can coexist, but accessibility should always come first. Write for people, not crawlers.

3. Treating All Images the Same

Not every image needs a paragraph of description. Not every image should be skipped. Categorize each image and treat it appropriately.

4. Using Images of Text

WCAG 2.1 Success Criterion 1.4.5 states that text should not be presented as an image unless it is essential (like a logo). Images of text cannot be resized, cannot be read by screen readers without alt text, and cannot be customized by users who need larger fonts or different colors. Use real text styled with CSS instead.

5. Ignoring Image Maps

Client-side image maps (where different regions of an image are clickable links) need alt text for each clickable area, not just the overall image. Each <area> element should have a descriptive alt attribute.

6. Forgetting About Background Images

CSS background images cannot have alt text. If a background image conveys meaningful information, provide a text alternative through other means, such as a visible caption or a visually hidden text element. If it is purely decorative, it is fine to leave it as a background image.

Testing Image Accessibility

You can catch most image accessibility issues with a combination of automated and manual testing:

  1. Run an automated scan. Tools like Accessible Metrics will flag images that are missing alt text, have suspiciously long or short alt text, or have file names used as alt text.
  2. Turn off images. Disable images in your browser and navigate the page. If you cannot understand the content, the alt text is missing or insufficient.
  3. Use a screen reader. Navigate with Tab and arrow keys while listening. Does the alt text make sense in context? Is anything confusing or redundant?
  4. Check for images of text. Look for text that is actually part of an image file. If you can select and copy the text, it is real text. If you cannot, it may be an image of text.

Beyond Alt Text: Image Formats and Performance

Accessibility also involves how images load and behave. A few additional considerations:

  • Use modern, efficient formats. WebP and AVIF offer better compression, which means faster page loads. Slow pages are an accessibility issue for users on low-bandwidth connections or older devices.
  • Provide responsive images. Use the srcset attribute to serve appropriately sized images for different screen sizes. A massive hero image on a phone wastes bandwidth and slows the experience.
  • Avoid flashing or animated content. Rapidly flashing images can trigger seizures in people with photosensitive epilepsy. WCAG 2.3.1 requires that nothing flashes more than three times per second.
  • Consider color and contrast. If information is conveyed only through color in an image (like a red circle indicating an error), make sure the same information is available through text or other visual cues like shapes or patterns.

A Quick Checklist for Image Accessibility

Use this checklist each time you publish a new page or add new images:

  • Does every informative image have concise, accurate alt text?
  • Are decorative images marked with empty alt text (alt="")?
  • Do functional images (buttons, links) have alt text describing the action?
  • Are complex images (charts, infographics) accompanied by a text alternative?
  • Are there any images of text that could be replaced with real text?
  • Have you tested the page with images disabled?
  • Have you run an automated accessibility scan?

Wrapping Up

Accessible images are one of the most impactful areas of web accessibility. They are also one of the easiest to get right once you know the principles. Write alt text that is concise, accurate, and purposeful. Skip decorative images. Provide text alternatives for complex visuals. Test your work.

When you make images accessible, you are not just checking a compliance box. You are making sure that every visitor to your site, regardless of how they experience it, can access the full richness of your content. That is what accessibility is all about.

Want to find out how your site measures up on image accessibility and more? Sign up for Accessible Metrics today and run a free scan against WCAG 2.1 AA, ADA, and Section 508 standards. You will get a detailed report highlighting missing alt text, contrast issues, and other barriers so you can start fixing them right away.