Images missing alt text

What happens to an image with no alt

The alt attribute is the text alternative for an image. Screen readers speak it, browsers display it when the image fails to load, and crawlers read it to understand what the image shows. When the attribute is missing entirely, assistive technology has to improvise. Depending on the software, that means announcing "image", "unlabeled graphic", or the file name taken from the src.

A missing alt and an empty one are different signals. alt="" tells assistive technology the image is decorative and can be skipped, so it stays silent. No alt at all says nothing, and the software guesses. For a linked image, such as a logo that goes home, the guess often becomes the link's only name, so the link is announced as a file path.

Who it hurts

Blind and low-vision visitors using screen readers are the first group. A product gallery with no alt text is a list of file names; a team page is a series of "image, image, image". Visitors on slow or metered connections who block images, and anyone whose image request fails, see a blank box instead of a description.

For agencies, alt text is a common line item in accessibility requirements written into public sector and enterprise contracts, and accessibility rules in many jurisdictions cover it. It is also among the easiest failures for a client's reviewer to find, since any automated checker reports it.

How Skewcheck checks it

Skewcheck inspects every <img> element in the page HTML. If any of them has no alt attribute at all, the check warns with medium severity and deducts 4 points from the audit score. One offending image is enough to trigger the warning, and twenty cost the same 4 points. alt="" counts as present, because it is the correct markup for decorative images. A page with no <img> elements passes.

The check confirms the attribute exists; it cannot judge what it says. alt="image" or alt="photo" passes and helps nobody, so read through your alt text by hand.

Writing alt text that works

Describe what the image contributes to the page, in the context where it appears. A product photo on a shop page needs the product and its distinguishing details. The same photo used as a mood image beside a blog intro may be decorative. Skip "image of" and "picture of", since screen readers already announce that it is an image.

For linked images, describe the destination or action, not the picture: "Example Bakery home" rather than "logo". For images containing text, such as a banner with an offer, repeat the text. For charts, give the main point in the alt and the full data in a table or caption next to it. In Next.js, the next/image component makes alt a required prop, so missing alt usually comes from raw <img> tags in CMS content, markdown, or third-party embeds.

import Image from "next/image";

export function CakeHero() {
  return (
    <Image
      src="/images/orange-cake.jpg"
      alt="Three-tier orange cake with fresh flowers"
      width={1200}
      height={800}
    />
  );
}

Edge cases

Tracking pixels and spacer images count. A 1x1 analytics <img> without alt will trigger the warning, so give it alt="". Images inserted through a rich text editor often have no alt unless the editor was filled in; make the field required in the CMS if you can. CSS background images and inline <svg> elements are not <img> tags and are outside this check, but an inline SVG that carries meaning still needs role="img" and an accessible name. The title attribute is not a substitute for alt; many screen readers ignore it and it never appears on touch devices.

Before and after

<img src="/images/IMG_4032.jpg">
<img src="/images/divider-swirl.svg">
<a href="/"><img src="/logo.svg"></a>

<img src="/images/IMG_4032.jpg" alt="Three-tier orange cake with fresh flowers">
<img src="/images/divider-swirl.svg" alt="">
<a href="/"><img src="/logo.svg" alt="Example Bakery home"></a>