Images with no alternative text

WCAG 1.1.1 (A) · EN 301 549 9.1.1.1

Some images have no alt attribute.

Why it matters

A screen reader cannot describe an image that carries no alternative text: it reads out the file name, or skips it entirely. On a product page that means the person does not know what they are buying.

Alt text is also what Google indexes your images by. It is the only fix on this list that also brings you traffic.

How to fix it

Add an alt that describes what the image contributes. If it is purely decorative, use alt="" — empty, not missing. The difference matters: with no attribute the file name gets read out; with an empty one the image is skipped.

<img src="/tshirt-sand-01.jpg">

<img src="/tshirt-sand-01.jpg"
     alt="Organic cotton t-shirt in sand, front view">

<!-- Decorative: empty alt, not missing -->
<img src="/flourish.svg" alt="">

On your platform

• Shopify

  Under Products › Media, click an image and edit "Alt text". For theme images, each image block in the theme editor has its own alt text field.

• WooCommerce

  In Media, select the image and fill in "Alt text". It applies everywhere the image appears.

• PrestaShop

  Under Catalog › Products › Images, the "Caption" field generates the alt.

• WordPress

  Media › Library, select the image and fill in "Alt text".

Related

• Alternative text that carries no information
• Image button with no alternative text
• Image map area with no name
• Meaningful SVG icon with no name