替代文本 (alt 属性)

图片的替代文本,对无障碍访问和 SEO 至关重要,在图片无法显示时作为替代内容。

替代文本 (alt text) 是通过 HTML <img> 标签的 alt 属性指定的图片说明文字。当图片无法加载时,它会代替图片显示出来,同时也是屏幕阅读器朗读的文本。这一规范从 Web 诞生之初就已存在,但随着无障碍访问和 SEO 两方面重要性的提升,它已成为现代 Web 开发中不可或缺的元素。

从无障碍访问的角度看,替代文本是必需的要素。视障用户使用屏幕阅读器浏览页面时,替代文本负责传达图片的内容。WCAG (Web 内容无障碍指南) 的成功标准 1.1.1"非文本内容"(符合级别 A) 要求为呈现给用户的所有非文本内容提供能够达成同等目的的文本替代,同时也规定了纯装饰、验证码 (CAPTCHA) 等若干例外情形。该标准从 WCAG 2.0 到 2.2 一直沿用,截至 2026 年,最新的 W3C 建议标准为 2.2。例如对于图表图片,应写成"展示 2024 年各月销售额变化的柱状图"这样的说明,描述图片所要传达的信息本质。如果数值本身才是要点,则可以把相同的数值放在正文或表格中呈现,让替代文本专注于说明该图的作用,这种分工同样有效。

从 SEO 的角度看,替代文本是搜索引擎理解图片内容的线索。Google 在图片 SEO 的说明中把替代文本定位为与图片相关的最重要的元数据,并解释说它会把替代文本、计算机视觉的解析结果以及页面正文的内容结合起来把握图片。当图片被用作链接时,替代文本会被当作该链接的锚文本处理。反过来说,塞满关键词的替代文本只会起到反作用。Google 明确要求避免用关键词填充 alt 属性 (关键词堆砌) 的做法,并指出这可能导致网站被视为垃圾内容。与只写"小狗"一个词相比,Google 给出的良好示例是"玩捡回游戏的斑点狗幼犬"这类能传达语境的说明。

撰写有效替代文本的出发点,是思考"如果通过电话把这张图片讲给对方听,会怎么说"。要简洁准确地说明图片内容,并且不加"图片""照片"之类的前缀。屏幕阅读器本身就会朗读出这是一张图片,加上前缀只会重复。关于长度,"125 个字符以内"这个数字被广泛引用,但 HTML 规范、WCAG 以及 Google 的文档中都没有写明字数上限。实务中绝大多数情况几个词到一两句话就足够,若超出这个范围,就说明信息量过多,或者混入了本应写在正文、图片说明或图表解说页中的内容。装饰用途的图片应设置空的 alt 属性 (alt=""),让屏幕阅读器能够跳过。需要注意的是,明确写出 alt="" 与完全不写 alt 属性是两回事:前者是"不需要替代文本"的声明,后者则是什么都没有声明的状态。

实务中要按图片的作用分别撰写。传达信息的图片写出要点;装饰性图片使用 alt=""。作为链接或按钮的图片,要写链接目标或操作行为,而不是外观 (放大镜图标应写"搜索"而不是"放大镜")。像横幅或图中标签那样带有文字的图片,则把画面中的文字原样转写出来。如果紧邻的正文已经说明了相同内容,该图片就设为 alt="",避免让用户把同样的说明听两遍。图表或表格类图片无法用一句话说完,替代文本只传达图的类型与主旨,详细内容交给正文或相邻的表格提供。

一个常见的误解是把替代文本与 title 属性混为一谈。title 属性是鼠标悬停时显示的工具提示,在键盘操作或触摸操作下往往不会显示,因此无法替代替代文本。此外,CSS 背景图片无法设置 alt 属性,所以应避免只通过背景图片传达重要信息。把图片文件名 (如 IMG_2024.jpg) 直接填进 alt、所有图片反复使用同一句文案、放任 CMS 自动填入的文字不管,这些做法同样没有起到替代文本的作用。

从字符计数的角度看,替代文本不会显示在画面上,因此只统计正文的计数不会把它包含在内。另一方面,搜索引擎会解析 HTML 并读取 alt 属性的值。管理稿件篇幅时统计正文字数,做评审或交付物检查时统计包含替代文本的整个 HTML,按目的切换统计对象就不会混乱。图片较多的页面,仅替代文本就会累积成可观的篇幅:若每张图 30 个字符、共有 30 张图,就相当于约 900 个字符。

分享这篇文章