# 图像必须有替代文本

<https://www.fixreports.com/zh/issues/image-alt>

WCAG 1.1.1 非文本内容 · A 级

图片缺少文本替代内容，屏幕阅读器用户无法得知图片显示的内容。

## 此规则检查什么
确保 <img> 元素有替代文本或 role 属性为 "none" 或 "presentation".

## 为什么重要
WCAG 1.1.1 要求有意义的图片提供文本替代内容。没有它，屏幕阅读器用户无法分辨照片展示的是哪件产品。

## 如何修复
### 在任何网站上
1. 在您的 CMS 或模板中，为每张图片的替代文本添加简短、具体的描述。
2. 描述对购物者重要的信息：产品名称、颜色和展示角度（例如“橄榄绿帆布托特包，正面”）。
3. 装饰性图片应使用空的 alt 属性（alt=""），让屏幕阅读器跳过它们。

### 在 Shopify 上
1. 在 Shopify 后台打开“产品 > [产品] > 媒体文件”，点击每张图片并填写“替代文本”。对于分区中的图片，请打开“在线商店 > 模板 > 自定义”，在分区设置中设置图片的替代文本。
2. 描述对购物者重要的信息：产品名称、颜色和展示角度（例如“橄榄绿帆布托特包，正面”）。
3. 装饰性图片应使用空的 alt 属性（alt=""），让屏幕阅读器跳过它们。

### 在 WooCommerce 和 WordPress 上
1. 在 WordPress 中打开“媒体 > 媒体库”，选择每张图片并填写“替代文本”。产品图库中的图片使用同一字段。
2. 描述对购物者重要的信息：产品名称、颜色和展示角度（例如“橄榄绿帆布托特包，正面”）。
3. 装饰性图片应使用空的 alt 属性（alt=""），让屏幕阅读器跳过它们。

## 如何检查修复效果
- 重新扫描受影响的页面。
- 使用屏幕阅读器（Mac 上的 VoiceOver：Cmd+F5）收听产品图片的朗读内容。

## 资料来源
- axe-core 规则文档（Deque）: https://dequeuniversity.com/rules/axe/4.13/image-alt
- 理解 WCAG 1.1.1（W3C）: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content