How to fix missing image alt text?

image-alt-text-missing page

The issue

An image without an alt attribute is a gap in the page for anyone using a screen reader. Depending on the screen reader, it announces the file name, such as IMG_4032.jpg, reads out the URL, or skips the image, and none of those say what the image shows. A product photo, a chart or a screenshot the text refers to becomes a hole in the argument. Search engines also read alt text to understand images, so the page says less to them too.

The cause is that the attribute is missing, which is different from an empty one. alt="" deliberately marks an image as decorative so assistive technology skips it. A missing alt marks nothing, and leaves assistive technology to guess. WCAG 1.1.1 requires a text alternative for all non-text content.

Scope

Each <img> on the page is checked on its own, along with image buttons, <object> elements, <area> elements in image maps, and elements with role="img", including SVGs. The right text depends on the image’s role on that page: the same logo can be decorative in a header that already names the company and informative in a list of partners.

How to check you have it

• In probeo: the page reports the image-alt rule, “Images must have alternate text”, on each <img> that has no alt, no aria-label, no aria-labelledby and no role="none" or role="presentation". Related rules cover the other elements: input-image-alt, object-alt, area-alt, role-img-alt and svg-img-alt. Hidden images are skipped.
• By hand: view the page source and search for <img. Every match should carry an alt attribute, empty or not.
• With a tool: the accessibility pane in Chrome or Firefox DevTools shows each image’s computed name. An informative image should have one; a decorative one should have none.

Probeo checks that a text alternative exists. It can’t judge whether the text describes the image, so read the alt text of informative images yourself.

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.