Noticea11y.image-alt-quality

Alt text that doesn't describe the image

Why it matters

An alt attribute that holds the file name, or the single word "image", passes every checker that only asks whether the attribute is there, and tells a blind visitor exactly as much as having none. It is what a CMS fills in when nobody else does.

Very long alt text is the opposite problem: a screen reader reads it in one breath, with no way to pause or skip back. 150 characters is our rule of thumb, not a standard: past a sentence or two, the detail belongs in the text next to the image.

We can only spot the mechanical cases. Whether "Cake" is a good description of this picture takes a person.

Source: WCAG 2.2, 1.1.1 Non-text Content; W3C: tips on alt text.

How to fix it

Replace it with what the image shows and why it is on the page:

<img src="/img/DSC_0042.jpg" alt="Our shop front on Call Lane, Leeds">

If the image is only decoration, an empty alt="" is the honest answer.

Examples

These are the rule's own test pages, and what it says about each. They are run on every change to the rule book.

<img src="/img/DSC_0042.jpg" alt="DSC_0042.jpg">

Notice1 image has alt text that won't help anyone. The first is a file name: "DSC_0042.jpg".

fail-file-name
<img src="/img/DSC_0042.jpg" alt="A three-tier wedding cake on a marble stand, iced in ivory fondant with a cascade of hand-made sugar peonies and roses in blush pink running from the top tier down to the base, photographed in our Leeds kitchen">

Notice1 image has alt text that won't help anyone. The first is 210 characters long: "A three-tier wedding cake on a marble stand, iced in ivory …".

fail-paragraph
<img src="/img/DSC_0042.jpg" alt="Image">

Notice1 image has alt text that won't help anyone. The first is a word that says nothing about it: "Image".

fail-says-image
<img src="/img/DSC_0042.jpg" alt="Our shop front on Call Lane, Leeds">

PassedNo alt text is a file name, a placeholder word or a paragraph.

pass-described