Image alt text: when to describe an image and when to leave it empty
Alternative text (the alt attribute) is a short description of an image that may be displayed when the image fails to load—and, most importantly, is read aloud by a screen reader to a blind customer. It may sound like a small detail, but on an online shop full of product photographs, icons and banners, it is one of the areas where barriers arise unnecessarily.
A common problem: every image gets the same type of description
Three mistakes recur in practice with alternative text.
It is missing. For a product photograph without an alt attribute, a screen reader may announce the file name—“IMG_4837.jpg”—or skip the image. As a result, the customer may not know what the image shows.
It is added unnecessarily. A decorative line, a shadow beneath a card or an icon next to text that already conveys everything is given the description “image” or “decoration”. The screen reader reads this for every element, turning the shopping experience into a stream of meaningless chatter.
It is stuffed with keywords. “cheap men’s winter outdoor jacket sale online shop”—text written for a search engine, not a person. A description like this does not help anyone understand the purpose of the image.
The common cause is that no one distinguishes what each image is there to do on the page. Everything else follows from that.
How to choose alternative text based on the image’s purpose
The rule is simple and can be applied to any image: ask what role it plays on the page.
- It conveys information (a product photograph, chart or instructional screenshot) → the
altdescribes what matters. For a product, include its name and a key distinguishing feature: “Blue men’s hooded jacket, front view.” Do not write “image” or “product photograph”—the screen reader already knows it is an image. - It is purely decorative (a divider, shadow or decorative icon next to text) → use an empty
alt="". This is not an error; it is intentional and tells the screen reader to skip the image. - It is a button or link (a basket icon or search magnifying glass) → the
altdescribes the action, not the appearance: “Search”, “Add to basket”. Not “magnifying glass”. - It is complex (a chart or infographic) → provide a short
altand a detailed description in the surrounding text.
Configured automated checks can alert you to a missing alt attribute. Whether the text is meaningful for the image’s purpose, however, must be assessed by a person; automated scanners have limitations in this area.
What accurate descriptions give you
- Blind customers can navigate the catalogue more easily and continue shopping.
- The screen reader does not waste time announcing decorative elements, making the website usable rather than merely technically “compliant”.
- Missing attributes can be detected continuously during automated runs, while editorial or manual review verifies the quality of the text.
Next step
Not sure whether your images have meaningful descriptions—or any descriptions at all? During a no-obligation consultation, we will agree the scope of an initial scan and show you where missing descriptions create a barrier.