WCAG 1.1 — Does every informative image have a text alternative?

Images without alternative text

The issue

The absence of alternative text on images is the most widespread accessibility issue on the web. WCAG success criterion 1.1.1 requires that every informative image has an alt attribute describing its content in a relevant way. When an alt attribute is missing, screen readers like NVDA, JAWS, or VoiceOver cannot convey the visual information to blind or visually impaired users. Instead of describing the image content, the screen reader will read the filename — often an incomprehensible technical identifier like 'IMG_20250315_142356.jpg' or 'banner-v3-final-2.png'. The user then faces unintelligible content that completely disrupts the reading flow. This issue does not only concern forgotten decorative images. It also affects functional images (buttons, image-links, icons), logos, infographics, screenshots, and charts. Each type of image requires a different approach to writing a relevant text alternative. A decorative image should have an empty alt (alt="") to be ignored by screen readers, while an informative image needs a concise and accurate description of its content. Complex images like charts or infographics require a detailed description, either in the alt attribute or via an adjacent mechanism (caption, link to a long description). From a regulatory perspective, missing text alternatives constitute a non-conformity with WCAG (Success Criterion 1.1.1, Level A) and the RGAA. With the enforcement of the European Accessibility Act, companies that do not fix this type of issue face financial penalties and user complaints.

Does your site have this issue?

106 RGAA criteria analyzed in 5 minutes by our AI.

Test your site for free

Impact on users

For a blind person using a screen reader, an image without alternative text is a black hole in the page. If the image is an action button ('Add to cart', 'Submit order'), the user cannot interact with the site. If the image is a chart in an article, the information it conveys is simply lost. Visually impaired users who use a screen magnifier may also be affected if the image is pixelated when zoomed and only the alt text would allow understanding its content. Search engines also use alt attributes to index images: a missing alt is also a loss of SEO value. This issue affects millions of people: worldwide, approximately 2.2 billion people have vision impairments. Ignoring alternative text means denying them access to information.

Code example

Before (non-compliant)
<img src="/images/promo-sale.jpg">
<a href="/cart">
  <img src="/icons/cart.svg">
</a>
<img src="/images/revenue-chart-2025.png">
After (compliant)
<img src="/images/promo-sale.jpg" alt="Summer sale: up to 50% off the entire collection">
<a href="/cart">
  <img src="/icons/cart.svg" alt="View cart">
</a>
<img src="/images/revenue-chart-2025.png" alt="2025 Revenue: 12% growth in Q1, stable in Q2, +8% in Q3">

Frequently Asked Questions

When should I use an empty alt attribute (alt="")?
An empty alt attribute should be used on purely decorative images that provide no information to the page content. For example, a decorative background image, a visual separator, or an icon that is redundant with adjacent text. The empty alt tells screen readers to ignore this image.
How do I write good alternative text?
Good alternative text is concise (ideally under 125 characters), descriptive, and contextual. It should describe the function or information conveyed by the image, not its appearance. For a button-image, describe the action ('Submit the form'). For a photo, describe what it shows in the context of the page. Avoid phrases like 'Image of...' which are redundant.
What happens if an image has no alt attribute at all?
If the alt attribute is completely absent (not even alt=""), the screen reader will read the image's source filename. This produces incomprehensible announcements like 'slash images slash DSC underscore 4523 dot jpeg'. This is a very frustrating experience for the user.
Do CSS background images need an alt?
Images defined in CSS via background-image are not accessible to screen readers because they do not exist in the HTML DOM. If a CSS image carries information, it should either be replaced by an <img> tag with an alt, or a visually hidden text (sr-only class) should be added next to the element to provide equivalent information.
How can I automatically check for missing alt attributes?
Scrutia automatically detects all images without alt attributes during its WCAG audit. The tool also identifies images with irrelevant alt text (filename text, overly long alt, generic alt). You can run a free audit on scrutia.io to get the complete list of images to fix on your site.

Does your site have this issue?

Scrutia audits your site against WCAG 2.1 AA criteria in 5 minutes. Keyboard navigation, ARIA components, visible focus, contrasts, and much more.

Run a free audit