此规则检查什么
确保 <img> 元素有替代文本或 role 属性为 "none" 或 "presentation".
为什么重要
WCAG 1.1.1 要求有意义的图片提供文本替代内容。没有它，屏幕阅读器用户无法分辨照片展示的是哪件产品。
如何修复
在任何网站上
- 在您的 CMS 或模板中，为每张图片的替代文本添加简短、具体的描述。
- 描述对购物者重要的信息：产品名称、颜色和展示角度（例如“橄榄绿帆布托特包，正面”）。
- 装饰性图片应使用空的 alt 属性（alt=""），让屏幕阅读器跳过它们。
在 Shopify 上
- 在 Shopify 后台打开“产品 > [产品] > 媒体文件”，点击每张图片并填写“替代文本”。对于分区中的图片，请打开“在线商店 > 模板 > 自定义”，在分区设置中设置图片的替代文本。
- 描述对购物者重要的信息：产品名称、颜色和展示角度（例如“橄榄绿帆布托特包，正面”）。
- 装饰性图片应使用空的 alt 属性（alt=""），让屏幕阅读器跳过它们。
在 WooCommerce 和 WordPress 上
- 在 WordPress 中打开“媒体 > 媒体库”，选择每张图片并填写“替代文本”。产品图库中的图片使用同一字段。
- 描述对购物者重要的信息：产品名称、颜色和展示角度（例如“橄榄绿帆布托特包，正面”）。
- 装饰性图片应使用空的 alt 属性（alt=""），让屏幕阅读器跳过它们。
如何检查修复效果
- 重新扫描受影响的页面。
- 使用屏幕阅读器（Mac 上的 VoiceOver：Cmd+F5）收听产品图片的朗读内容。
FixReports 如何发现此问题
我们的扫描会在真实的 Chrome 浏览器中，对所测的每个页面运行 axe-core 规则 image-alt，并报告每个未通过的元素及其所在页面、标记代码，以及适用时的截图。
自动化测试可以确认这个具体问题确实存在，但无法判断页面的其余部分是否无障碍：有些障碍只有在人工检查页面时才会显现。