Alt Text（替代文字）：是什么、为什么重要、怎么写才不尴尬
学习为照片、产品图、截图、图表和链接图片编写准确的 Alt Text，让读屏软件、图片加载失败场景与搜索引擎都能理解图像的实际作用。本文提供好坏示例、简洁写法、装饰图空 alt 规则、关键词堆砌风险和批量审计方法，帮助你发现缺失或误用的替代文字，并在不重复周边正文的前提下提升可访问性与图片语义质量。
Alt Text（替代文字）就是给图片配的一段文字，用来在“看不到图片”的时候告诉人和机器：这张图是什么。HTML 里大概长这样：
<img src="/images/lcp-example.png" alt="LCP 折线图：优化后 Largest Contentful Paint 降到 2.1 秒">
我自己写 alt 的底线很简单：这句话读出来要像人写的，且放在这个页面上说得通。
为什么 alt 重要（以及什么时候没那么重要）
Alt Text 主要解决三件事：
- 无障碍可访问性： 读屏软件会把 alt 读出来。写成“img_123”那种，基本等于让真实用户吃苦。
- 图片理解： 搜索引擎会用 alt 作为线索来理解图片，尤其是截图、图表、产品图这类“信息型图片”。
- 图片加载失败的兜底： 图片挂了，alt 往往是页面上唯一还能说明情况的东西。
如果是一张纯装饰图（比如背景点缀、分割线），alt 的重要性就低很多，甚至应该用空 alt。
好的 alt vs 坏的 alt（快速对比）
坏（太空）：
- “image”
- “screenshot”
坏（堆词，很像作弊）：
- “best seo audit tool free seo checker website audit seo tools”
好（具体、短、贴合上下文）：
- “Fennec SEO Checker 审计摘要截图：3 个 Critical 问题”
- “产品图：红色跑鞋，侧面，白色鞋底”
- “流量图：canonical 配错后自然流量下滑 40%“
一个不容易写崩的写法
我一般用这个小模板：
- 它是什么？（照片 / 截图 / 图表 / 图标）
- 关键信息是什么？（读者需要记住的点）
- 必要时补一点上下文（比如页面名、指标名、关键标签）
不用写作文，也不必把 UI 的每个按钮都描述出来。
常见坑
1）装饰图别写成“有意义”的 alt
纯装饰图建议写空 alt：
<img src="/images/divider.svg" alt="">
这样读屏软件会跳过，不会在长文里反复读“divider / 装饰图”，听起来真的会崩溃。
2）图片当链接时，alt 就是“链接文字”
如果图片本身是一个链接，alt 经常会变成链接的可读文本。建议写得更像按钮：
<a href="/audit/">
<img src="/images/button.png" alt="开始免费 SEO 审计">
</a>
3）截图怎么写
截图尽量包含“页面名 + 你想让人看到的那一点”：
- “GSC 仪表盘：最近 28 天点击与曝光趋势”
不要把全屏所有控件都念一遍，那是转录，不是 alt。
怎么快速审计 alt 问题
大多数时候你只需要抓两类问题：
- 缺失 alt：
<img ...>没有alt属性。 - 空 alt 用错地方：
alt=""用在图表、产品图、关键截图上。
如果你在修一个站点，不想手动翻几十页，可以用爬虫型的审计；如果只是快速看单页，用扩展更省事。
一手资料
- W3C WAI 图片教程——按图片用途判断替代文字，包括装饰图使用空
alt的规则。 - WCAG 2.2 成功标准 1.1.1——非文本内容替代方案的规范依据。
回到词汇表
想看一句话定义，可以从这里跳回去：Glossary 里的 Alt Text。
相关 Wiki 词条
问答
写 alt 会直接提升 Google 排名吗？
Alt 不是一键提权，但它会改善可访问性、图片理解与页面质量细节。对图片搜索与整体相关性通常是加分项。
每张图都必须写 alt 吗？
有信息含量的图建议写。纯装饰图可以用空 alt（alt=""），让读屏软件跳过。
alt 里堆关键词是不是更好？
不是。堆词会变得像垃圾信息，对用户也很难读。写清楚图里是什么、和页面有什么关系就够了。