Probeo
probeo
Menu

Fix Missing Image Alt Text for Accessibility (WCAG 1.1.1)

Images without alt attributes force screen readers to announce file names or skip content entirely. This page covers the distinction between decorative and informative images, how to apply alt text correctly, and how to handle complex visuals like charts and diagrams.

The alt attribute on images serves as the text-level equivalent of visual content. When the attribute is missing entirely, screen readers fall back to announcing the file name — often a hash, a CMS slug, or a path fragment that communicates nothing. When the attribute is present but empty on an informative image, the image is treated as decorative and skipped. Both cases create a gap between what sighted users see and what assistive technology can convey. WCAG 1.1.1 requires that all non-text content has a text alternative that serves the equivalent purpose.

What's wrong

One or more img elements lack the alt attribute. Without it, assistive technology has no programmatic way to determine the image's purpose. Screen readers handle this differently depending on implementation: some announce the file name (IMG_4032.jpg, hero-banner-v3-final.png), some announce the full src URL, and some skip the element silently. None of these outcomes convey meaning. This is distinct from an empty alt attribute (alt=""), which is a deliberate signal that the image is decorative and should be ignored by assistive technology. A missing alt attribute is not a signal — it is an absence of information, and assistive technology is left guessing.

Why it matters

Images carry information. A product photo communicates what is being sold. A chart summarizes data that the surrounding text references. An icon next to a navigation label reinforces meaning. When these images lack text alternatives, screen reader users receive a degraded version of the page where visual arguments have gaps. The impact compounds on pages where images are central to the content — product listings, tutorials with screenshots, dashboards with charts. For users who cannot see the images, the page becomes structurally incomplete. Search engines also use alt text to understand image content. Missing alt attributes reduce the semantic richness of the page for both accessibility and indexing.

The correct change

Every image must have an alt attribute. The value depends on the image's role. Informative images — those that convey content not available elsewhere on the page — need descriptive alt text that captures the equivalent information. A photo of a cracked foundation should describe the crack, not say "photo" or "image of building." Decorative images — backgrounds, visual separators, redundant icons next to text labels — should use an empty alt attribute (alt=""). This tells assistive technology to skip the element entirely, which is the correct behavior for content that adds no information. Complex images like charts, diagrams, and infographics often cannot be fully described in a short alt attribute. These need a brief alt identifying the image type and subject, with a longer description provided through adjacent text, a figcaption, or an aria-describedby reference pointing to a detailed description elsewhere on the page.

Scope

This condition applies at the page level. Each image element must be evaluated individually because the correct alt text depends on the image's role in context. The same image file may be decorative on one page and informative on another — a company logo in the header is decorative when the company name is already in text, but informative when it appears as the sole identifier in a partner listing. Templates and component libraries should ensure alt is always present as an attribute, but the value must be set per-instance based on context.

How to verify

  • Validation confirms the condition is resolved:
  • • Every img element has an alt attribute present in the markup
  • • Informative images have descriptive alt text that conveys the equivalent information
  • • Decorative images use alt="" (empty string), not a missing attribute
  • • Complex images (charts, diagrams) have both a brief alt and an extended description via adjacent text or aria-describedby
  • • SVG elements used as images have either a title element or an aria-label
  • • CSS background images that carry meaning have a text alternative provided through visible text or an aria-label on the container
  • • Screen reader testing confirms no file names or URLs are announced for any image

Takeaway

  • A missing alt attribute is not the same as an empty one — missing means broken, empty means intentionally decorative
  • Every image needs classification: decorative images get alt="", informative images get descriptive text
  • Complex visuals (charts, diagrams, infographics) require extended descriptions beyond the alt attribute
  • The correct alt text depends on the image's role in its specific page context, not on the image file itself
  • WCAG 1.1.1 Non-text Content is a Level A requirement — baseline, not optional

FAQ

How should CSS background images be handled for accessibility?
CSS background images are invisible to assistive technology by default. If a background image is purely decorative — a texture, gradient, or ambient visual — no action is needed. If it carries meaning (a hero image that establishes context, a background that contains text), the information must be available through other means: visible text overlay, an aria-label on the container, or off-screen text. The image itself cannot receive an alt attribute because it is not in the DOM as an element.
What is the correct way to make SVGs accessible?
Inline SVGs should include a title element as the first child of the svg element, with an aria-labelledby attribute on the svg pointing to that title's id. For decorative SVGs, use aria-hidden="true" and role="presentation" to remove them from the accessibility tree entirely. SVGs embedded via img tags follow standard img alt text rules. SVGs used as icon buttons need an accessible name — either through the title element, aria-label on the button, or visually hidden text.
How should complex images like charts and diagrams be described?
A chart or diagram cannot be fully represented in a brief alt attribute. Use the alt to identify the image type and subject (alt="Bar chart showing monthly revenue for Q3 2025"), then provide the full data through an adjacent table, a figcaption with the key findings, or a linked page with the complete description. The aria-describedby attribute can point to a longer text block on the same page. The goal is equivalence — a screen reader user should be able to derive the same conclusions as a sighted user.
What alt text should be used for product images on e-commerce pages?
Product images are informative. The alt text should describe what the image shows in context: the product name, distinguishing visual characteristics (color, size, angle), and any detail the image specifically highlights. Avoid generic patterns like "product image" or "photo of item." If a product has multiple images showing different views, each alt should describe what that specific view shows. Thumbnail images linking to larger versions should describe the product, not the interaction.
Should linked images have alt text that describes the image or the link destination?
When an image is the sole content of a link, the alt text must describe the link's purpose, not the image's visual content. An image linking to a company's about page should use alt="About Acme Corp" rather than alt="Acme Corp logo." If the link contains both text and an image, and the text already describes the destination, the image should be decorative (alt="") to avoid redundant announcements. The link's accessible name is constructed from all its content — duplicate descriptions degrade the experience.
How do image lazy loading and responsive images affect alt text requirements?
Neither lazy loading (loading="lazy") nor responsive image techniques (srcset, picture element) change alt text requirements. The alt attribute belongs on the img element regardless of how or when the image loads. Responsive images that use the picture element with multiple source elements still need the alt on the fallback img element inside picture. Lazy-loaded placeholder patterns (blur-up, skeleton screens) should ensure the final rendered img element carries the correct alt attribute.