# Images must have alternative text

Source: https://www.fixreports.com/issues/image-alt

WCAG 1.1.1 Non-text Content · Level A

Images are missing a text alternative, so screen reader users don't know what they show.

## What this rule checks
Ensure <img> elements have alternative text or a role of none or presentation.

## Why it matters
WCAG 1.1.1 requires a text alternative for meaningful images. Without it, a screen reader user can't tell which product a photo shows.

## How to fix it
### On any website
1. Add a short, specific description to each image's alt text in your CMS or template.
2. Describe what matters to a shopper: product name, color and the angle shown (for example 'Canvas tote in olive, front view').
3. Decorative images should have an empty alt attribute (alt="") so screen readers skip them.

### On Shopify
1. In Shopify admin, open Products > [product] > Media, click each image and fill in 'Alt text'. For section images, open Online Store > Themes > Customize and set the image alt text in the section settings.
2. Describe what matters to a shopper: product name, color and the angle shown (for example 'Canvas tote in olive, front view').
3. Decorative images should have an empty alt attribute (alt="") so screen readers skip them.

### On WooCommerce and WordPress
1. In WordPress, open Media > Library, select each image and fill in 'Alternative Text'. Product gallery images use the same field.
2. Describe what matters to a shopper: product name, color and the angle shown (for example 'Canvas tote in olive, front view').
3. Decorative images should have an empty alt attribute (alt="") so screen readers skip them.

## How to check the fix
- Re-scan the affected pages.
- Use a screen reader (VoiceOver: Cmd+F5 on Mac) to hear the product images announced.

## Sources
- axe-core rule documentation (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- Understanding WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content