alt 文本 (替代文本,Alternative Text) 是设置在 HTML 的 img 元素 alt 属性中的值,用文字说明图片的内容。图片无法加载时它会代替图片显示,屏幕阅读器 (面向视觉障碍者的朗读软件) 也会用它把图片的内容传达给用户。
alt 文本是 Web 无障碍的基本要求。WCAG (Web Content Accessibility Guidelines) 2.1 的成功准则 1.1.1 (A 级) 要求,为呈现给用户的所有非文本内容提供起到同等作用的文字替代。该准则在后继的 2.2 中也没有改动。没有 alt 文本的图片,对屏幕阅读器的用户来说就成了不知道里面有什么的空白。
从 SEO 的角度看 alt 文本同样重要。Google 关于图片搜索的官方文档说明,它会把 alt 文本与页面正文内容、图像识别算法结合起来判断图片里有什么;当图片被用作链接时,alt 文本还会被当作锚文本处理。写得恰当的 alt 文本有助于获得来自图片搜索的流量,但排序并不是只由 alt 文本决定的。
就与短链接服务的关联而言,对应的是给 OGP 图片附上的说明文字。Open Graph protocol 规定,页面如果指定了 og:image,就应同时指定 og:image:alt,其取值定义为对图片中有什么的说明 (而不是图片的标题)。在 SNS 上分享链接时显示的缩略图带上这段说明,看不到图片的用户也能了解内容。二维码的图片则要写清扫码之后会到哪里,例如「通往某某页面链接的二维码」。把 URL 字符串原样放进 alt,朗读出来只是一串符号,传达不了任何内容。
写好 alt 文本的要点是简洁而具体地说明图片的内容。避免「图片」「照片」这类冗余表述,直接写出图片所传达的信息。装饰用途的图片应设置空的 alt 属性 (alt="") 并让屏幕阅读器跳过它。