Alt text for product images: what to write when every photo looks the same
Most alt text advice is written for blog photos. "A golden retriever catching a frisbee on a beach." Fine. But try that on a product page for a hardware store and it falls apart fast, because half the catalog is grey metal on a white background. A 1/2" brass elbow and a 3/4" brass elbow look identical in a photo. So do most drywall anchors. If the alt text just says "brass fitting", a screen…
Writing alt text for product images can be challenging, especially when many of the images appear similar. Traditional advice often focuses on blog photos, but product pages require a different approach. For instance, two brass elbows or drywall anchors may look identical in a photo, so simply labeling them as "brass fitting" offers no additional information to a screen reader user compared to the product title.
Alt text on a product page typically serves one of three purposes: identifying the product, providing a detailed view not obtainable from text, or demonstrating the scale or use of the product. Each of these scenarios requires a distinct alt text.
For the main image, avoid duplicating the title verbatim. Instead, augment it with details that the title does not cover, such as a front view of the product with relevant features highlighted. As for detail shots, they are where alt text truly shines. These are images most often scrutinized, and they provide crucial information that a sighted user might miss.
When describing scale or use, include measurements if available, but ensure they are accurate. For decorative images, it's best to leave the alt text blank, as an empty alt tells assistive technology to skip the image entirely. This approach prevents unnecessary announcements and maintains a smooth user experience.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
