When should alt text be empty?

An empty alt attribute (alt="") is correct for purely decorative images — spacers, background flourishes, or icons that duplicate adjacent text. It tells screen readers to skip the image. The mistake is leaving alt off entirely, which makes assistive tech announce the filename instead.

Why is 125 characters the limit?

It is a widely adopted guideline rather than a strict WCAG rule. Some older screen readers truncate long alt text, and concise descriptions are easier to listen to. If an image genuinely needs more explanation, put the detail in a visible caption or longdesc and keep alt short.

What is wrong with 'image of...' in alt text?

Screen readers already announce that the element is an image, so prefixes like 'image of', 'photo of', or 'picture of' are redundant and waste the listener's time. Describe the content directly: 'Sunset over the harbour' rather than 'Photo of a sunset over the harbour'.

Why flag alt text that matches the filename?

When alt text equals the src filename (like 'IMG_2043' or 'hero-banner-v2'), it is almost always auto-generated boilerplate, not a real description. It provides no useful information to a screen-reader user and should be replaced with a meaningful description.

Does this check whether the alt text is accurate?

No tool can judge whether alt text correctly describes an image — that needs a human. This checker catches structural and length issues (missing, empty, too long, redundant, filename) that are mechanically detectable, narrowing down the images a person needs to review.

Alt Text Length & Quality Checker

Alt text is what screen-reader users hear in place of an image, and it is one of the most common accessibility failures on the web. This checker scans your HTML for every image and flags the mechanical problems — the ones you can catch without a manual review.

How it works

The pasted HTML is parsed in your browser using the built-in DOMParser, the same engine the browser itself uses, so the img elements are found exactly as a real page would see them. For each image the checker inspects the alt attribute and applies five rules:

Missing — no alt attribute at all. Assistive technology falls back to the filename or silence. This is the most serious issue.
Empty — alt="". Correct for decorative images, flagged as info so you can confirm the image really is decorative.
Too long — over 125 characters. A WCAG-aligned guideline; long descriptions belong in a caption.
Redundant prefix — starts with “image of”, “photo of”, and similar. Screen readers already announce the element as an image.
Filename — the alt text equals the src filename, a tell-tale sign of auto-generated placeholder text.

Worked example

<img src="harbour.jpg" alt="Sunset over the harbour at low tide">  <!-- ok -->
<img src="logo_v2.png">                                            <!-- missing -->
<img src="spacer.gif" alt="">                                      <!-- decorative -->
<img src="hero.jpg" alt="Photo of hero.jpg">                       <!-- redundant + filename -->

The first image is ideal: concise and descriptive. The second has no alt at all and is flagged red. The third is a deliberate decorative empty alt. The fourth trips two rules at once.

Tips

Describe the image’s purpose in context, not every pixel. A product photo’s alt might be the product name; a chart’s alt should state its key takeaway.
Use empty alt="" deliberately for decoration — but never omit the attribute.
This tool finds the mechanical problems; a human still needs to confirm the remaining alt text actually describes each image. Combine it with a real screen-reader pass for full coverage.