See plans and pricing

Images must have alternate text

Estimated effort: about 5 minutes.

Images on your website need short text descriptions so that screen readers can tell blind and low-vision visitors what the image shows. Without this text, a visitor either hears nothing or hears the image's file name read aloud, which is confusing and unhelpful.

How to fix it

  1. Find the <img> element that is missing alt text (or has only a file name in it).
  2. If the image conveys information, add a short, specific alt attribute describing its content and purpose, e.g. alt="Red leather wallet, front view".
  3. If the image is purely decorative (a background flourish, spacer, or divider with no meaning), set alt="" (an empty alt attribute) so screen readers skip it.
  4. Do not use words like "image", "photo", "graphic", or the file name as the alt text.
  5. Save and reload the page; confirm the alt attribute is present in the rendered HTML.

Elementor note

Elementor's Image widget pulls its Alternative Text field from the image's WordPress Media Library attachment by default. Fix the alt text on the attachment in Media Library (Media > Library > select image > Alternative Text) so it carries through wherever that image is reused.

WooCommerce note

WooCommerce product images use the WordPress Media Library attachment's Alternative Text field by default. Update each product image's alt text via Media Library so product pages, galleries, and thumbnails all inherit it.

Before and after

Before

<img src="wallet.jpg">

After (informative image)

<img src="wallet.jpg" alt="Red leather wallet, front view">

After (decorative image)

<img src="divider.png" alt="">

View the full rule reference from Deque University

See plans and pricing