What this image alt checker looks at
This image alt checker takes the HTML you paste and lists every <img> in document order with its
source, an approximate line number and a verdict on its alt text: absent, empty, described, longer
than your threshold, or simply the file name in disguise. It also counts the images that declare no
width and height, and the ones with no lazy-loading hint.
Three of those checks are accessibility checks that happen to help search. One is a performance check. None of them requires uploading anything.
Why you paste markup here
Fetching a third-party page from inside a browser is blocked by design, and no amount of front-end cleverness gets around it. A checker with a URL box is therefore a checker with a back end, and your address is going into it. Since the parsing here is a few hundred lines of JavaScript, the honest arrangement is to run it where the markup already is.
Use view-source for a static page. For anything rendered by a framework, copy the outer HTML of
<body> from the Elements panel, because that is the markup that actually exists once the page
has run.
Accessibility first, search second
It is worth being clear about the order. The alt attribute was specified so that a person using a screen reader, a person on a text browser, and a person whose image failed to load all get the same information. Search engines read it because it is a reliable description written by the publisher, not the other way round.
That order changes what good alt text looks like. Describe the thing that matters in the picture, in the context of the sentence around it. A photograph of a shop front on a contact page is "The Bristol showroom entrance on Park Street"; the same photograph in a gallery about signage might be "Hand-painted gold lettering above a black shopfront". Neither mentions your keyword, and neither needs to.
Skip "image of" and "picture of". The technology already announces that it is a graphic, so those three syllables are pure overhead on every image.
Empty alt is an answer, not an omission
The checker reports alt="" as a note rather than a problem, because it is the correct way to
mark a decorative image. Purely presentational graphics, icons that duplicate adjacent text and
tracking pixels should all be hidden from assistive technology, and the empty attribute is the
mechanism for saying so.
What deserves attention is the image with no alt attribute at all. That is not a decision; it is a gap, and every automated accessibility audit will report it.
The file name trap
When alt text matches the file name — team-photo.jpg described as "team photo" — nobody wrote a
description. A theme or an upload script filled the field, and the result reads to a listener as
the name of a file rather than a description of a scene.
This one is a heuristic, so it can fire on an image whose file name is genuinely descriptive. Even then it is worth the second look, because the underlying question is the same: did a person write this?
Dimensions, lazy loading and the fold
Images with no width and height cannot have their space reserved, and the page reflows as each
one arrives. Set both attributes to the intrinsic pixel size of the file and control the rendered
size with CSS.
The lazy-loading count is reported as a count on purpose. Whether an image sits below the fold depends on the viewport, the font size and the content above it — none of which exist in a chunk of pasted markup. The rule of thumb is that the largest image in the first screenful should stay eager, because deferring it delays your Largest Contentful Paint, and everything below it can be lazy.
When you are done here, the Heading Structure Checker covers the
outline of the same page, and the Meta Tag Analyzer reads what is inside the
<head>.