2026 年图像 alt 文本实用指南

为什么 alt 文本仍然重要

Alt 文本自 1995 年起就是 HTML 规范的一部分。三十年后，网络上的大多数图像仍然要么没有 alt 属性，要么 alt 文本读起来像是由从未使用过屏幕阅读器的人写的。

如今问题已经不再是认知不足。大多数内容管理系统现在都会将 alt 字段设为必填。问题在于，alt 文本已经从一种沟通工具变成了合规勾选项。人们会写“一个人在微笑的图像”，而实际语境却是“CEO 宣布第四季度财报”。

Alt 文本存在的唯一理由，是向无法看到图像的人传达图像的用途。这个用途会随语境而变化。咖啡馆首页上的一张咖啡杯照片，与陶瓷釉面工艺博客文章中的同一张照片，承担的功能并不相同。

到了 2026 年，我们也有了可以自动生成 alt 文本的 AI 工具。这些工具正在变得更好，但它们仍然不理解语境。它们描述自己看到的内容，而不是说明这张图为什么出现在这里。

决策树：这张图需要 alt 文本吗？

并非每张图都需要描述性 alt 文本。有些图是装饰性的。有些图是冗余的。有些图更适合用图注或周围文本来说明。

以下是决策过程：

这张图是否传达了周围文本中没有的信息？ 如果是，它需要 alt 文本。如果否，它很可能是装饰性的。

如果这张图消失，盲人用户是否会错过重要信息？ 如果是，撰写 alt 文本。如果否，使用空 alt 属性（alt=""）告诉屏幕阅读器跳过它。

这张图是链接或按钮吗？ alt 文本会成为链接文本。描述目标，而不是图像本身。“查看定价方案”比“箭头图标”更好。

这张图是否复杂——例如图表、示意图或信息图？ Alt 文本有实际长度限制（对大多数屏幕阅读器来说，约 125 个字符比较舒适）。复杂图像需要更长的描述，可以放在图注、正文中，或通过 aria-describedby 提供。

好的 alt 文本听起来是什么样

好的 alt 文本具体、简洁，并且理解语境。它回答的问题是：这张图为什么在这里？

不佳： “一张图表的图像”

更好： “折线图显示 2026 年 1 月至 3 月移动端流量增长 23%”

不佳： “一个人在使用笔记本电脑”

更好： “设计师在 Figma 中审阅网站模型”

不佳： “点击这里”

更好： “下载完整的无障碍审计清单（PDF）”

请注意，好的 alt 文本通常包含数字、动作或结果。它不会描述每一个视觉细节。它描述重要的内容。

对于装饰性图像——主视觉背景纹理、装饰性边框、纯美学插画——使用 alt=""。这不是偷懒，而是语义上的诚实。屏幕阅读器会完全跳过该图像，这正是你想要的效果。

浪费所有人时间的常见错误

以“……的图像”或“……的图片”开头：屏幕阅读器已经会提示这是图像。直接进入描述即可。

为了 SEO 堆砌关键词：Alt 文本不是塞入“Brooklyn 最佳有机咖啡豆手工烘焙”的地方。Google 的图片搜索多年来一直擅长识别这种做法。请为人而写。

描述文件名：“IMG_3847.jpg”帮不了任何人。“hero-banner-final-v3”也一样。

写成一篇小说：如果你的 alt 文本超过两句话，这些信息很可能应该放在图注或正文中。

重复相邻文本：如果标题写着“如何烘焙酸面包”，而图像展示的是某人在整形面团，那么 alt 文本不需要重复标题。描述视觉上独特的内容：“双手在撒了面粉的台面上折叠酸面团。”

真正有帮助的工具和工作流

大多数现代 CMS 现在都内置了 alt 文本字段。WordPress、Webflow、Contentful 和 Sanity 都会在上传时显著展示 alt 属性。字段可见并不意味着它会被写好。

如果你正在审计网站中缺失或质量不佳的 alt 文本，Accessibility Insights 或 axe DevTools 等浏览器扩展可以标记没有 alt 属性的图像。若要快速手动检查，可以在浏览器中关闭图像（Firefox 和 Chrome 都支持），然后阅读页面。如果 alt 文本在语境中说得通，就说明做得还可以。

AI 生成的 alt 文本——例如 Azure Computer Vision、Google Cloud Vision 等工具提供的，或内置于 Cloudflare Images 等平台中的——可以作为合理的起点，尤其适用于大型图像库。但请把 AI alt 文本当作初稿。它会准确描述图像内容，但不会知道这张图为什么在页面上。仍然需要人工编辑补充语境。

如果你正在处理一个大量使用图像的网站，并希望尽早发现性能问题，Wux Webtools 的 Image Compressor 这类工具可以帮助你在上传前优化文件大小——因为只有图像真正加载出来，alt 文本才有用。

2026 年的 alt 文本与 SEO

Google 多年来一直表示，alt 文本是图片搜索的排名因素。这一点仍然成立。但图片搜索优化并不等同于无障碍。

如果你主要为了 SEO 编写 alt 文本，最终会得到一堆关键词堆砌的废话，让屏幕阅读器用户更难浏览页面。如果你首先为无障碍编写 alt 文本，SEO 收益会自然随之而来，因为描述清晰、具备语境的 alt 文本，正是 Google 图片搜索算法试图呈现的内容。

有一个细微差别：Google Images 现在比过去更依赖页面周围内容。如果你的 alt 文本写得不错但比较泛化（“带糖霜的巧克力蛋糕”），而页面主题是纯素烘焙，Google 会理解这个语境。除非图像中能明显看出这种区别，否则你不需要写“带无乳制品糖霜的纯素巧克力蛋糕”。

要点总结

• Alt 文本的作用是传达图像的用途，而不是描述每一个视觉细节
• 装饰性图像应使用 alt=""，让屏幕阅读器完全跳过它们
• 好的 alt 文本具体、理解语境，并回答“这张图为什么在这里？”
• AI 生成的 alt 文本是有用的起点，但仍然需要人工编辑以补充语境
• 首先为无障碍而写；清晰、描述性的文本会自然带来 SEO 收益

FAQ

Q: 我可以只用 AI 生成所有 alt 文本吗？

A: AI 工具擅长描述图像中有什么，但它们不理解语境。如果你在处理数百张产品图片并需要一个基线，AI alt 文本是可以的。对于编辑内容、营销页面，或任何图像存在的原因很重要的场景，都需要人工审阅和编辑。

Q: Alt 文本应该多长？

A: 大多数屏幕阅读器对 125 个字符或更短的内容更容易处理。如果你需要更多内容，这些信息很可能应该放在图注、正文，或通过 aria-describedby 链接的更长描述中。技术上没有严格限制，但更长的 alt 文本会让导航变得笨拙。

Q: Logo 需要 alt 文本吗？

A: 需要，但保持简单。如果你的 logo 位于页眉并链接到首页，alt 文本应为公司名称：alt="Acme Corp"。除非“这是一个 logo”这一事实与语境相关，否则不要写 alt="Acme Corp logo"。

Q: Alt 文本和图注有什么区别？

A: Alt 文本是图像的直接替代内容。当屏幕阅读器遇到图像时，会读取它。图注是补充信息，对所有人可见，用于增加语境或注明来源。如果两者同时存在，它们不应彼此重复。

Q: 我应该为 CSS 中的背景图添加 alt 文本吗？

A: 不应该。CSS 背景图按定义是装饰性的，不会暴露给屏幕阅读器。如果背景图传达了重要信息，它应该是 HTML 中带有适当 alt 文本的 <img> 元素。

来源

• W3C Web Accessibility Initiative：图像教程
• WebAIM：替代文本
• Nielsen Norman Group：图像 alt 文本
• Google Search Central：图片 SEO 最佳实践