When people think about accessible images, they often think about alternative text, or alt text. While alt text is an important part of image accessibility, creating accessible images involves more than writing a description and adding it to an image.
Every image needs an alt attribute
Before deciding what alternative text an image needs, we need to understand the HTML requirement behind it. Every <img> element must have an alt attribute. That’s not just an accessibility best practice. It’s required by the HTML specification. Whether the image needs a detailed description, a short label, or no description at all, the attribute itself should always be present.
<img src="image.jpg" alt="text that describes the image">
<img src="image.jpg" alt="">Both of the images in the code example above are valid ways to add an image to a page. The first important step is to make sure that the alt attribute simply exists.
Decorative images vs. informative images
Great! Now that we have valid HTML in place we need to determine whether or not we need to add a value to that alt attribute. The easiest way to determine whether an image needs alt text is to ask a simple question: If this image disappeared, would the user lose information?
If the answer is no, the image is probably a design element. Decorative flourishes, background textures, divider graphics, and other purely visual assets don’t add meaning to the page. Screen reader users don’t benefit from hearing them announced, so these images should typically have an empty alt attribute.
If the answer is yes, then the image is part of the content and it needs a text alternative. This requirement comes from WCAG Success Criterion 1.1.1: Non-text Content, which requires that all non-text content presented to users has a text alternative that serves an equivalent purpose.
A useful rule of thumb is to keep decorative imagery in CSS whenever possible. Background images, patterns, and other visual treatments are often better implemented as CSS backgrounds. That removes them from the document structure entirely and avoids the question of how they should be announced by assistive technology. Of course, there are times when decorative images end up in the HTML. In those situations, an empty alt attribute tells assistive technologies that the image can be safely ignored.
The special case for icons
Icons usually function as decorative elements. They often reinforce nearby text, add visual interest, or make an interface easier to scan. In those cases, the icon itself does not need to be announced because the surrounding text already communicates the meaning.
But icons can also stand on their own. When an icon is used without visible text, it may be the only visual cue explaining what an element does. In that case, the icon is no longer just decoration. It is communicating information within the interface.
A common example is a search icon. A magnifying glass is widely understood to represent search, so it may appear on its own in a button or navigation area without visible text. Visually, the icon communicates the purpose of the control. For people who cannot see the icon, that same purpose still needs to be available.
In most cases, I still recommend treating the icon itself as decorative. If the icon is added through CSS or included as an embedded SVG, it can be hidden from assistive technologies with aria-hidden=“true” or role=“presentation”. Then the interactive element around it, usually a link or button, should provide the accessible name.
Writing useful alt text communicates the meaning of the image
Once we’ve identified which images need alternative text, the next challenge is writing alt text that actually helps users. Many accessibility guides focus on describing what’s visible in the image. That’s a good starting point, but it’s not always enough. Effective alt text depends heavily on the surrounding content.
Imagine an image of a dog. Without any context, an alt attribute like this might seem perfectly reasonable:
<img src="dog.jpg" alt="A cute puppy jumping" />But now imagine that image appears in an article about Labrador retrievers. The image isn’t just showing a dog. It’s reinforcing information about the breed. Let’s say our surrounding content is talking about the activity needs of a Labrador puppy.
In that context, something like this may be more useful:
<img src="dog.jpg" alt="A happy Labrador puppy running and playing outdoors" />The goal isn’t simply to describe the pixels on the page. The goal is to communicate the purpose the image serves within the content. Users who can’t see the image should receive the same meaningful information that sighted users gain from it. Writing good alt text often requires understanding the article, page, or feature the image belongs to. The surrounding content provides context that the image alone cannot.
Beyond automated image accessibility testing
Testing image accessibility presents a unique challenge because some requirements can be verified automatically while others require human judgment. Automated accessibility testing tools are very good at checking for the presence of an alt attribute. They can identify images that are missing alternative text entirely and flag potential violations of WCAG Success Criterion 1.1.1. Some tools can also identify suspicious patterns, such as file names being used as alt text or unusually long descriptions.
What automated tools cannot reliably determine is whether the alternative text is actually useful. Consider the following example:
<img src="labrador-puppy.jpg" alt="Dog" />An automated testing tool will likely consider this valid because the image has an alt attribute. However, it cannot determine whether the description supports the surrounding content, provides meaningful information, or communicates the image’s purpose to users who cannot see it. This is why manual accessibility testing remains an important part of the development process. Someone needs to review both the image and its surrounding content to determine whether the alternative text provides an equivalent experience.
AI can be a helpful tool during this review process. Modern AI systems can analyze images, consider surrounding content, and suggest alternative text that may better communicate the purpose of an image. However, AI-generated suggestions should be treated as recommendations rather than final answers.
The most effective approach combines automated testing, AI-assisted review, and human judgment. Automated tools can quickly identify missing requirements, AI can help generate and evaluate potential descriptions, and people can determine whether the final alternative text accurately supports the content and user experience.
Accessible images are about communication
Accessible images aren’t just about adding alt attributes. They’re about ensuring that the information conveyed by an image is available to everyone.
That means image accessibility can’t be treated as a final checkbox. It needs to be considered when images are chosen, when they are added to a page, and when the experience is tested.
The best alternative text is grounded in purpose and context. When we understand why an image is there and what it communicates, we can make better decisions about whether it needs to be announced, how it should be implemented, and what users need to know if they cannot see it.
