Missing alt vs empty alt: a one-minute image check for landing pages

Landing pages are full of images: hero shots, icons, dividers, screenshots. Two different mistakes with alt are easy to make, and a quick look at the source finds both.

The check

View the page source and search for <img. For each image, ask what it is for.

• It carries information (a product screenshot, a chart, a logo that is also a link): alt should say what a person who can't see it needs to know.
• It is decoration (a flourish, a background shape, an icon next to text that already says the same thing): use an empty alt="".
• There is no alt attribute at all: that is the one to fix first.

Why empty and missing are different

The W3C's tutorial on decorative images says a null alt (alt="") lets assistive technologies ignore the image, and that leaving the attribute out is not an alternative, because when it is missing some screen readers will announce the file name instead. MDN agrees on the empty case: alt="" marks the image as not a key part of the content, and non-visual browsers may omit it.

So <img src="IMG_4821.webp"> can be read out as a file name, while <img src="swirl.svg" alt=""> is skipped. The W3C page also notes that decorative images are better done as CSS background images where possible.

• W3C, Decorative images: https://www.w3.org/WAI/tutorials/images/decorative/
• MDN, the img element: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img

Common slips

• Alt text that repeats the adjacent caption word for word.
• A decorative icon with alt="icon", which adds noise to every button.
• A hero image of text with no alt, so the headline exists only as pixels.
• A linked logo with alt="logo" instead of where the link goes.

Quick test

1. Search the source for <img and count the ones with no alt at all.
2. For each remaining image, decide: informative or decorative.
3. Turn on a screen reader for one screen of the page and listen for file names or "image" repeated with no meaning.

Whether an image is decorative depends on why it is on the page, and only you know that. Which of your images would you mark empty?