# 图片替代文本检测工具 输入页面网址，在脚本运行后于真实浏览器中读取页面，列出其中的每张图片及其替代文本。查看哪些图片没有替代文本、哪些被标记为装饰性，以及哪些替代文本什么也没有描述。 ## 此工具检查什么 - 缺少替代文本的图片: 每个既没有 alt 属性、也没有 aria-label 等其他可访问名称的 img 元素和图片按钮。 - 让链接失去名称的带链接图片: 链接或按钮中的标志和图标，既没有替代文本，也没有其他文字，因此屏幕阅读器只能播报“链接”。 - 看起来像文件名的替代文本: 像 IMG_2041.jpg、DSC0042 或一长串数字这样的值，许多系统会在上传时自动填入。 - 笼统的词语: 只有“image”（图片）、“photo”（照片）、“logo”（标志）或“banner”（横幅）的替代文本，无法让任何人知道图片展示了什么。 - 冗余和重复的文字: 以“image of”（……的图片）开头、重复旁边的链接文字，或在三张及以上不同图片上重复使用的描述。 - 装饰性和隐藏的图片: 标记为 alt="" 或 role="presentation" 的图片，以及用 aria-hidden 或 CSS 隐藏的图片会单独列出，方便您确认每张图片是否真的是装饰性的。 - 每张图片的预览: 缩略图显示在替代文本旁边，让您几秒钟就能判断每条描述。筛选器可以只显示问题，或只显示需要检查的项目。 ## 它无法检查什么 - 无法判断替代文本是否准确。只有能看到图片、并了解它为什么出现在页面上的人才能判断。 - 无法检查设为 CSS 背景的图片，也无法检查 SVG 和 canvas 图形的文本替代。它列出的是 img 元素和图片按钮。 - 无法检查框架内的图片，例如嵌入的视频、地图和广告。 - 最多列出 150 张图片。在很长的页面上，它会显示前 150 张，并说明总共有多少张。 - 无法测试其他页面。完整的免费扫描会在最多五个关键页面上，连同 WCAG 的其余部分一起检查替代文本。 ## 为什么重要 替代文本是屏幕阅读器代替图片朗读的内容，也是图片加载失败时浏览器显示的内容。WCAG 2.2 的 A 级成功准则 1.1.1 要求，每张承载信息的图片都要有文本替代，不承载信息的图片则使用空的文本替代。 缺少替代文本是网络上第二常见的无障碍问题：WebAIM 在 2026 年的分析发现，排名前一百万的网站首页中有 53.1% 存在这一问题，而在其检查的所有图片中，有 16.2% 没有替代文本。 搜索引擎也会读取它。Google 表示，它会结合计算机视觉和页面内容，利用替代文本来理解图片，而带链接图片的替代文本，作用就像链接的锚文本。 ## 如何解读结果 - 缺少替代文本: 图片没有 alt 属性，也没有其他名称。视软件而定，屏幕阅读器可能会读出文件名，也可能跳过这张图片。 - 装饰性: alt="" 或 role="presentation"：屏幕阅读器会跳过该图片。用于装饰时是正确的；但如果图片承载信息，或是链接的唯一内容，就是错误的。 - 有替代文本: 图片有描述。我们会标出看起来有问题的描述；其余的仍需由人来确认是否准确。 - 通过 ARIA 或 title 命名: 没有 alt 属性，但通过 aria-label、aria-labelledby 或 title 获得了名称。这能通过自动化测试，不过 alt 仍是更可靠的选择。 - 已隐藏: 未显示，或通过 aria-hidden 对辅助技术隐藏。除非这张图片本应被看到，否则无需修复。 - 没有名称的链接: 唯一内容是一张没有文本替代的图片的链接或按钮。即使图片本身是装饰性的，这也算未通过。 - 待确认: 替代文本看起来像文件名或笼统的词语、以“image of”开头、重复链接文字、非常长，或在多张图片上重复使用。 ## 如何修复最常见的问题 - 产品和内容照片: 结合页面上下文，描述没有这张图片时人们会错过什么。对产品来说：商品本身、它的颜色以及所展示的角度。对文章配图来说：它展示了哪些正文没有提到的内容。 - 链接到首页的标志: 带链接的图片应说明链接指向哪里。对于链接到首页的标志，请使用公司名称，例如 alt="Acme 首页"，而不是“logo”。 - 链接和按钮中的图标: 为图标提供说明操作的替代文本，例如“搜索”或“购物车”；或者为链接添加 aria-label，并用 alt="" 把图标标记为装饰性。 - 装饰性图片: 对分隔线、背景装饰，以及与紧邻文字内容重复的图片，使用 alt=""（空值，而不是缺少该属性）。 - 平台自动填入的文件名: 许多平台会在上传时把文件名复制到 alt 字段中。请在管理图片的地方修改：在 Shopify 中是产品的媒体文件；在 WordPress 中是媒体库里的“替代文本”字段。 - 图表和信息图: 提供简短的 alt，说明图表展示了什么，并把数据或摘要放在旁边的正文或表格中。 ## 常见问题 ### 什么是替代文本？ 图片的 alt 属性保存的是它的文本替代。屏幕阅读器会把它朗读出来，图片无法显示时浏览器也会显示它。 ### 每张图片都应该有替代文本吗？ 每个 img 元素都应该有 alt 属性。对于承载信息的图片，它用来描述图片；对于装饰性图片，它应为空（alt=""），让屏幕阅读器跳过。 ### 替代文本应该多长？ WCAG 没有设定上限。好的替代文本通常是一个简短的短语或句子。如果图片需要更多说明，请在页面正文或图片说明中描述，并让 alt 保持简短。超过 150 个字符的替代文本，我们会标出来供您再看一眼。 ### 替代文本对 SEO 有帮助吗？ Google 表示，它会结合计算机视觉和页面内容，利用替代文本来理解图片，而带链接图片的替代文本作用就像锚文本。它也提醒，在 alt 属性中堆砌关键词可能会被视为垃圾内容。 ### title 属性和 alt 一样吗？ 不一样。title 会在鼠标悬停时显示为提示框，屏幕阅读器不一定会播报，在触摸屏上也无法使用。缺少 alt 时，自动化测试会把它当作名称，但 alt 才是可靠的选择。 ### AI 能帮我写替代文本吗？ 它可以起草描述，但不知道这张图片为什么出现在您的页面上。请审核每一份草稿：合适的替代文本取决于只有您才了解的上下文。 ## 来源 - [W3C：理解 WCAG 2.2 成功准则 1.1.1 非文本内容](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) - [W3C 图片教程：alt 决策树](https://www.w3.org/WAI/tutorials/images/decision-tree/) - [W3C 图片教程：功能性图片](https://www.w3.org/WAI/tutorials/images/functional/) - [Google 搜索中心：图片 SEO 最佳做法](https://developers.google.com/search/docs/appearance/google-images) - [Deque：axe-core image-alt 规则](https://dequeuniversity.com/rules/axe/4.13/image-alt) - [WebAIM：The WebAIM Million（2026）](https://webaim.org/projects/million/)