免费工具 图片 alt 检查：页面上每张图的 alt 写对了吗
粘贴网页源码，每张图片都会得到一个结论：没写 alt、故意留空的装饰图、相机或微信图片的文件名、一串关键词，还是没问题。作为链接唯一内容的图片会查得更严——它的 alt 就是这条链接对搜索引擎和读屏软件来说唯一的文字。
- img、input type=image、area
- WCAG 与 WAI 规则
- 不加载任何图片
检查图片 alt
粘贴整页源码或其中一段 HTML。表格按文件名列出每张图片、它的 alt 和结论。图片本身不会被下载或显示。
整页或片段都行。检查 <img>、<input type="image"> 和 <area href>；CSS 背景图没有 alt，不在列表里。
图片数
5
缺 alt
1
完全没有 alt 属性。
空 alt
1
不在链接里的 alt=""，按装饰图处理。
要改或要复核
3
文件名或占位词、关键词罗列、过长、链接里的空 alt。
检查结果
错误在前，然后是警告和提示，附行号。
- 错误第 16 行logo.svg 是链接里唯一的内容，却没有 alt。这条链接对 Google 和读屏软件来说没有任何文字；写清链接去向（logo 一般写网站名或「首页」）。
- 错误第 46 行next-post.jpg 写了 alt=""，但它是 <a> 里唯一的内容。空 alt 是给装饰图用的，放在这里会让链接没有文字。写清链接去向。
- 警告第 31 行wx_20261108.jpg：alt「微信图片_20261108.jpg」是文件名。WCAG 把用文件名当替代文字列为失败情形（F30）。写出图片内容。
- 警告第 33 行before-after.png：alt「网店提速,网站加速,页面速度,网店优化,电商提速」读起来是一串关键词。Google 的图片指南要求避免往 alt 里堆关键词，一句平实的描述更好。
- 提示5 个 <img> 里有 5 个没写 width 和 height。这不是 alt 的问题，但不写宽高浏览器没法预留位置，会造成布局偏移（CLS）。
图片列表
文件名取自 src（或 data-src），alt 按原样显示，附结论。
| # | 图片 | alt | 结论 | 隐藏 | 行号 |
|---|---|---|---|---|---|
| 1 | logo.svg | （无 alt） | 缺 alt（在链接里） | — | 16 |
| 2 | wx_20261108.jpg | 微信图片_20261108.jpg | 文件名 | — | 31 |
| 3 | before-after.png | 网店提速,网站加速,页面速度,网店优化,电商提速 | 关键词罗列 | — | 33 |
| 4 | divider.png | （空） | 装饰图 | — | 34 |
| 5 | next-post.jpg | （空） | 空 alt（在链接里） | — | 46 |
版本 v1.0更新于 更新记录
「缺」「空」「写错」是三回事
alt 只做两件事之一：内容图用它说明图片传达了什么；装饰图故意留空，让辅助技术跳过。工具把这几种情况分开，你只需要改真正有问题的。
缺 alt
完全没有 alt 属性。HTML 标准把它理解为「重要内容但没有文字替代」，WCAG 视为失败情形（F65）。这是最先要改的。
空 alt（装饰图）
alt="" 告诉读屏软件跳过这张图。分隔线、底纹、旁边文字已经说清楚的小图标都该这样写；但图片是链接或按钮里唯一的内容时，空 alt 就错了。
文件名和占位词
「微信图片_20261108.jpg」「IMG_2041」「图片」：写了等于没写。WCAG F30 点名的就是这类。
关键词罗列和过长
Google 要求避免往 alt 里堆关键词，它举的反例就是一串关键词。过长不算错，但图注往往更适合读者。
Google 把 alt 称为图片元数据里最重要的属性，图片作为链接时还会把 alt 当锚文本（Google 图片 SEO 指南）。无障碍规则来自 W3C WAI 图片教程。
检查一个页面的图片
发布文章前、换主题模板后、盘点商品详情页时都用得上。
-
1
粘贴 HTML
在页面上按 Ctrl+U 查看源代码后全选复制，也可以只复制一段，比如商品图区块。
-
2
先改错误
先处理缺 alt 和没有文字的图片链接，行号对应你粘贴的源码。
-
3
再看警告
文件名、占位词、关键词罗列：改成一句话说明图片展示了什么、或者点了会怎样。
-
4
确认装饰图
逐个确认标为「装饰图」的图片真的没有信息。删掉它会丢信息的，就要写 alt。
每个结论是怎么判出来的
规则来自 WHATWG HTML 标准、WCAG 2.2 的失败技术和 W3C WAI 图片教程；和搜索相关的地方引用 Google 的图片指南。
- 检查对象：
<img>、<input type="image">、<area href>，正是 WCAG F65 涵盖的三种 - 图片链接：在
<a>或<button>里、旁边没有其它文字的<img>，它的 alt 要写链接去向（WAI 功能图） - 文件名：以图片扩展名结尾、等于文件名，或像
IMG_1234、DSC0001、微信图片_2026…这种相机 / 截图命名；占位词：单独的「图片」「照片」「image」「logo」等 - 关键词罗列：用逗号、顿号分成 5 段以上，或同一个英文词出现 3 次以上；过长：超过 150 个字符，是本工具的提醒线，不是标准
| 写法 | 结论 | 依据 |
|---|---|---|
<img src="puppy.jpg"> | 缺 alt | WCAG F65；Google 的反例 |
<img src="line.png" alt=""> | 装饰图 | WAI 装饰图 |
<a href="/zh/"><img src="logo.svg" alt=""></a> | 错误：链接没有文字 | WAI 功能图 |
| alt="微信图片_20261108.jpg" | 文件名 | WCAG F30 |
| alt="网店提速,网站加速,页面速度…" | 关键词罗列 | Google 图片指南：关键词堆砌 |
| alt="白色亚麻衬衫正面" | 通过 | 说清图片内容 |
默认示例查出来什么
默认内容是一篇网店运营笔记的源码，共 5 张图片。
| 行号 | 图片 | alt | 结论 |
|---|---|---|---|
| 16 | logo.svg（首页链接里） | （无） | 错误：缺 alt，链接没有文字 |
| 31 | wx_20261108.jpg | 微信图片_20261108.jpg | 警告：文件名 |
| 33 | before-after.png | 网店提速,网站加速,页面速度… | 警告：关键词罗列 |
| 34 | divider.png | （空） | 装饰图，没问题 |
| 46 | next-post.jpg（链接里） | （空） | 错误：链接没有文字 |
改法：logo 写 alt="示例小铺首页"；微信图片写清拍的是什么；对比图写一句「压缩后商品页 1.2 秒打开，压缩前 4.8 秒」；下一篇的图片链接写 alt="下一篇：商品图用什么格式"。另外 5 张图都没写宽高。
alt 通常错在哪
大部分糟糕的 alt 都是自动生成的：建站后台、上传插件，或者照着「SEO 清单」机械地填。
让后台自动填文件名
很多上传工具会把文件名复制进 alt，「微信图片_2026…」「IMG_2041」对谁都没用。插入图片时顺手写一句描述。
把 alt 当关键词栏
把页面想做的关键词全堆进 alt，正是 Google 图片指南里的反例。描述图片本身，相关的关键词自然会出现。
链接图片写空 alt
装饰图写 alt="" 没错，但整个链接就是一个 logo 或缩略图时必须有文字，否则读屏软件只会读出「链接」。
和图注重复
图注或链接文字已经说明图片内容时，写 alt="" 可以避免同一句话读两遍。
先改流量大的页面
检查工具会列出所有问题；TapCub 告诉你哪些页面访客多、搜索流量大，改 alt 和压图片先从那里开始。
怎么检查网页图片有没有写 alt？
在网页上按 Ctrl+U 查看源代码，复制后粘到上面。每张图片会列出文件名、原样的 alt 和结论：缺 alt、装饰图、文件名、关键词罗列或通过，行号对应源码。
图片 alt 属性可以为空吗？
装饰图可以：alt="" 告诉读屏软件跳过这张图，这是 W3C WAI 教程推荐的写法。但图片是链接或按钮里唯一的内容时不行，否则这条链接没有名字。
不写 alt 和 alt="" 有什么区别？
不写是完全没有 alt 属性，HTML 标准把它理解为「重要图片但没有文字替代」，部分读屏软件会改读文件名；alt="" 是明确告诉辅助技术「这是装饰图」。
alt 写多长合适？
没有标准规定长度。写出图片在这个页面里要传达的信息，通常是一个短语或一句话。本工具对超过 150 个字符的 alt 给提示，提醒你考虑用图注或正文来写。
alt 对 SEO 有用吗？
Google 说 alt 是理解图片最重要的属性，图片作为链接时还把 alt 当锚文本；同时提醒不要往 alt 里堆关键词。为人写，也就是 Google 要求的写法。
alt 里要写「图片」两个字吗？
一般不用。读屏软件会先说明这是图片，「图片：红色自行车」会被读成「图片，图片：红色自行车」。只有媒介本身重要时才写，比如「截图：…」「油画：…」。
懒加载的图片为什么被提示？
它只有 data-src、没有 src。Google 通过 src 属性发现图片，懒加载脚本应在图片加载时把真实地址写回 src，或者直接用浏览器原生的 loading="lazy"。
会上传 HTML 或加载图片吗？
都不会。HTML 在你的浏览器里解析，图片只按文件名列出，不会向你的服务器或任何地方发请求。