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…
Landing pages are filled with various types of images such as hero shots, icons, dividers, and screenshots. Two common mistakes when using alt text with images are easy to make, but it only takes a quick glance at the source code to identify both issues. To perform this check, simply view the page source and search for "img". For each image found, ask yourself what its purpose is.
If the image conveys information like a product screenshot, chart, or a logo that functions as a link, it should have a descriptive alt attribute. On the other hand, if the image is purely decorative, such as a flourish, background shape, or an icon next to text that already conveys the same message, use an empty alt attribute (alt="").
It's crucial to note that an image with no alt attribute at all is different from an empty alt attribute. According to the W3C's tutorial on decorative images, a null alt attribute (alt="") allows assistive technologies to ignore the image, whereas leaving the attribute out is not a viable alternative, as some screen readers may announce the file name instead.
Similarly, MDN confirms that alt="'' marks the image as non-essential, and non-visual browsers may omit it. Additionally, the W3C page suggests that decorative images are better handled as CSS background images whenever possible.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
