Site Architecture & UX

Alt 文本(替代文本)

Alt 文本(替代文本)

Alt 文本(替代文本)是一种描述性 HTML 属性,用于传达数字内容中图片的含义和上下文。它使屏幕阅读器能够向视障用户传达图片内容,并帮助搜索引擎理解和索引视觉内容,以提升 SEO 表现。

Alt 文本的定义

Alt 文本,全称替代文本,是一种添加到图片标签中的描述性 HTML 属性,用于传达数字环境中视觉内容的含义、上下文和目的。根据 Microsoft 官方文档,alt 文本是一种描述性文本,用于传达数字环境(如应用或网页)中视觉项目的含义和上下文。正确实施 alt 文本后,它使屏幕阅读器——视障人士使用的辅助技术——能够朗读图片描述,从而使所有用户都能访问视觉内容。除了无障碍功能外,alt 文本还具有重要的 SEO 功能,它帮助搜索引擎理解和索引图片内容,从而提升图片搜索排名和整体页面相关性。HTML 实现非常简单:<img src="image.jpg" alt="描述性文本">,其中 alt 属性包含文本描述。如果没有 alt 文本,依赖屏幕阅读器的用户将遇到空白区域或通用提示,从而错过明眼用户习以为常的关键信息。

Alt 文本在网页无障碍中的关键作用

在数字无障碍和包容性网页设计中,alt 文本的重要性怎么强调都不为过。根据 2024 年 WebAIM Million 报告(分析前 100 万个网站),21.6% 的首页图片缺少 alt 文本,平均每个页面有 12 张图片缺乏描述。更令人担忧的是,14.6% 带有 alt 文本的图片描述存在问题或重复内容,这意味着大约三分之一的流行首页图片存在 alt 文本缺失、存疑或重复的问题。这一无障碍缺口直接影响到全球约 22 亿依靠辅助技术浏览网页的视障人士。当 JAWS、NVDA 和 Microsoft Narrator 等屏幕阅读器遇到没有 alt 文本的图片时,它们要么不播报任何内容,要么朗读文件名,让用户感到困惑,无法理解关键内容。网页内容无障碍指南(WCAG) 作为国际公认的网页无障碍标准,明确要求非文本内容必须提供文本替代方案,这使得 alt 文本成为美国残疾人法案(ADA)欧洲无障碍法案(EAA) 等法律规定的合规要求。未能正确实施 alt 文本的组织将面临法律诉讼、声誉损害以及将全球人口的相当一部分排除在数字体验之外的风险。

Logo

Ready to Monitor Your AI Visibility?

Track how AI chatbots mention your brand across ChatGPT, Perplexity, and other platforms.

Alt 文本与相关概念:理解区别

概念可见性主要用途无障碍影响SEO 影响使用时机
Alt 文本不可见(除非图片加载失败)为屏幕阅读器和搜索引擎描述图片对无障碍合规至关重要高——帮助搜索引擎索引图片所有信息性图片
图片标题页面上可见,位于图片下方/旁边为所有用户提供上下文信息有帮助,但非合规必需中等——强化内容相关性当附加上下文对明眼用户有益时
图片标题属性悬停时显示为工具提示(部分浏览器)鼠标悬停时显示附加信息极小——屏幕阅读器不播报低——搜索引擎不索引很少需要;优先使用 alt 文本
文件名用户不可见在服务器上组织文件无无障碍价值极小——已过时的 SEO 做法仅用于文件组织
周围文本页面上可见提供通用页面上下文补充但不替代 alt 文本支持整体页面相关性与 alt 文本配合使用

技术实施与 HTML 标准

Alt 文本的 HTML 实现遵循一个简单但关键的结构。alt 属性放置在 <img> 标签内,这是在网页中嵌入图片的标准方式。格式正确的图片标签如下:<img src="sunset-mountain.jpg" alt="金色夕阳照耀在雪山峰顶上,橙紫色天空倒映在宁静的高山湖面上">。Alt 文本应直接放置在 HTML 代码中,对明眼用户不可见——除非图片加载失败,此时 alt 文本会显示在缺失图片的位置。这种后备功能对于网络连接缓慢或遇到图片链接损坏的用户尤为重要。内容管理系统(CMS)如 WordPress、Shopify、Wix 和 Squarespace 提供了用户友好的界面来添加 alt 文本,无需直接编辑 HTML。例如,在 WordPress 中,用户可以通过媒体库或区块编辑器的图片设置添加 alt 文本。现代平台越来越多地提供自动 alt 文本生成功能,利用人工智能和计算机视觉技术。Microsoft 365 产品(包括 PowerPoint、Word 和 Outlook)现在具备自动 alt 文本生成器,使用图像字幕模型创建初始描述。然而,这些 AI 生成的描述应始终由人工审核和完善,以确保准确性、相关性以及与周围内容的一致性。WCAG 2.1 标准规定所有图片必须包含文本替代方案,并对不同类型的图片提供具体指导:照片、图标、插图、图表和链接图片各自需要量身定制的 alt 文本编写方法。

编写有效 Alt 文本的最佳实践

编写有效的 alt 文本需要平衡具体性、简洁性和上下文相关性。黄金法则是:就像向看不见图片的人描述它一样来编写 alt 文本,侧重于最重要的内容,而非每一个视觉细节。来自无障碍专家的研究建议将 alt 文本控制在 1-2 句话,理想情况下不超过 125 个字符,因为大多数屏幕阅读器会截断超过此长度的文本。避免冗余短语,如「图片」、「照片」或「图形」,因为屏幕阅读器已经会播报存在图片。相反,直接进入描述:不要写「一位穿着黄色夹克骑自行车的女人的图片」,而应写「穿着黄色夹克的女人在秋日城市公园中骑自行车」。将最重要的信息放在最前面,因为屏幕阅读器用户可能会提前停止收听或跳过内容。对于装饰性图片,使用空 alt 属性(alt="")告知屏幕阅读器完全跳过它们,从而避免不必要的播报。自然融入相关关键词(如果它们适合图片及其上下文),但绝不要堆砌关键词,这既损害用户体验,也损害搜索引擎排名。对于图表、信息图或示意图等复杂图片,在 alt 文本中提供关键见解的简洁摘要,然后在页面其他位置补充更长的文字描述或数据表格。例如,不要写「显示销售数据的柱状图」,而应写「柱状图显示 2024 年第一季度至第二季度在线销售额增长 30%,6 月达到销售高峰」。编写 alt 文本时要考虑周围内容的上下文,因为同一张图片根据用途可能需要不同的描述。哈佛纪念教堂的照片在一篇关于春季活动的文章中可能描述为「学生在哈佛庭院的彩色椅子上休息」,但在关于校园建筑的文章中可能描述为「霍利斯楼毗邻哈佛庭院的开阔草坪空间」。

跨数字生态系统的平台特定实施

不同平台和内容管理系统要求不同的 alt 文本实施方法。WordPress 是最广泛使用的 CMS,为超过 43% 的网站提供支持,允许用户通过媒体库或 Gutenberg 区块编辑器添加 alt 文本。用户可以通过导航到媒体 > 库,点击图片并在指定字段中输入 alt 文本来编辑现有图片。Shopify 是领先的电子商务平台,在产品图片上传时或通过产品编辑器(点击铅笔图标并在「图片 alt 文本」字段中输入文本)编辑 alt 文本。WooCommerce 为约 38% 的电商网站提供支持,与 WordPress 的媒体库功能集成。WixSquarespace 是流行的网站构建器,提供可视化界面,用户可点击图片并通过设计或编辑菜单访问 alt 文本设置。社交媒体平台越来越重视 alt 文本无障碍功能。Instagram 允许用户在发布帖子前通过高级设置添加 alt 文本。Twitter(现为 X) 通过点击已上传图片上的「+ALT」按钮添加 alt 文本,最多支持 1000 个字符。LinkedIn 在上传图片时提供「添加 Alt 文本」选项。Facebook 使用 AI 自动生成 alt 文本,但用户可以在发布前编辑或自定义描述。Microsoft 365 应用程序——包括 PowerPoint、Word、Excel 和 Outlook——现在具备由图像字幕 AI 驱动的自动 alt 文本生成功能。用户可以通过 Alt 文本窗格批准、编辑或手动输入 alt 文本。这种多平台环境意味着内容创作者必须了解其使用的每个平台的具体工作流程,但基本原则始终如一:描述性、简洁、与上下文相关并能传达图片含义的文本

Alt 文本与 AI 搜索可见性

随着 ChatGPT、Perplexity、Google AI Overviews 和 Claude 等生成式 AI 系统越来越多地分析和引用网络内容,alt 文本对于AI 可见性和引用追踪变得具有战略意义。这些 AI 平台使用检索增强生成(RAG) 技术,这意味着它们会在网络上搜索相关信息并在回复中引用来源。当 AI 系统遇到带有良好编写的 alt 文本的图片时,它们能更好地理解视觉内容并将其融入回复中。Alt 文本帮助 AI 系统准确解读和描述图片,提高 AI 生成内容的相关性和准确性。对于使用 AmICited 或类似 AI 监控平台的组织来说,追踪图片及其 alt 文本在 AI 回复中的呈现方式,对于了解品牌可见性和内容归属至关重要。缺少或没有 alt 文本的图片可能会被 AI 系统误解,导致描述不准确或错过引用机会。相反,优化良好的 alt 文本能增加图片在多个平台的 AI 生成回复中被正确理解、引用和归属的可能性。Alt 文本重要性的这一新兴维度反映了向生成式引擎优化(GEO) 的广泛转变,内容创作者不仅要针对传统搜索引擎进行优化,还要针对日益成为信息发现和在线分享中介的 AI 系统进行优化。

统计证据与合规环境

围绕 alt 文本的无障碍危机已通过严谨研究得到充分记录。2024 年 WebAIM Million 报告分析了前 100 万个网站,发现 54.5% 的首页缺少图片替代文本,使其成为仅次于低对比度文本(81% 的页面)的第二常见的 WCAG 违规项。报告还显示,18.5% 的首页图片缺少 alt 文本,平均每个页面有 11 张图片缺乏描述。AudioEye 的 2024 年无障碍统计数据报告称,整个网络 60% 的图片没有替代文本,表明大多数网页和移动设备上的图片仍然无法访问。这些统计数据凸显了无障碍标准与现实实施之间的持续差距。法律合规要求使得 alt 文本的实施对许多组织来说不可妥协。WCAG 2.1 Level A 标准明确要求所有非文本内容提供文本替代方案,WCAG 2.1 Level AA 则要求对复杂图片提供更详细的描述。受美国 ADA、欧洲 EAA 或类似无障碍法规约束的组织,将因内容不可访问而面临法律责任。近期的诉讼越来越多地针对无障碍性差的网站,包括那些缺少适当 alt 文本的网站。《康复法案》第 508 条要求联邦机构和承包商提供可访问的数字内容,包括带有 alt 文本的图片。除法律要求外,alt 文本的实施反映了组织在包容性和用户体验方面的价值观。优先考虑无障碍的公司展示了服务所有用户(无论其能力如何)的承诺,这有助于提升品牌声誉并扩大市场覆盖范围。

正确实施 Alt 文本的关键方面与优势

  • 无障碍合规:满足 WCAG 2.1、ADA、EAA 和第 508 条要求,降低法律风险,确保包容性设计
  • 屏幕阅读器兼容性:使 JAWS、NVDA 和 VoiceOver 等辅助技术能够向视障用户传达图片内容
  • SEO 增强:提升图片搜索排名,增加自然流量,强化搜索引擎主题相关性
  • 后备功能:在图片因链接损坏、连接缓慢或浏览器问题而加载失败时显示,保持内容清晰
  • AI 系统理解:帮助生成式 AI 平台在回复中准确解读和引用视觉内容
  • 用户体验:为所有用户(包括连接缓慢或使用纯文本浏览器的用户)提供上下文信息
  • 内容清晰度:确保即使视觉元素无法显示,图片的信息和用途也能保留
  • 移动端无障碍:支持带宽有限的移动设备用户或使用基于文本的浏览模式的用户
  • 语义含义:强化页面内容,帮助搜索引擎将图片与周围文本关联以实现更好的索引
  • 品牌一致性:允许组织控制其图片在不同平台上的描述和解读方式

常见的 Alt 文本错误

即使是了解 alt 文本重要性的团队,也常常因一些反复出现的错误而削弱其效果。以「图片」或「照片」开头会浪费屏幕阅读器用户对每个元素的有限注意力——软件已经播报了图片存在,以此开头只会延迟实际内容的呈现。为 SEO 堆砌关键词将描述性文字变成了不可读的搜索词列表,这违反了 WCAG 的意图导向指南,同时损害了用户体验和本应提升的搜索排名。装饰性图片未使用空 alt="" 属性会迫使屏幕阅读器播报无意义的填充内容——分隔线、边框和背景装饰应明确标记为跳过,而非因遗漏而留空或用无人需要的描述填充。编写忽略周围上下文的 alt 文本会产生技术上准确但无帮助的描述;同一张照片根据页面内容是讲校园生活还是建筑,需要不同的描述,而通用描述两者都无法满足。未经审核就信任 AI 生成的 alt 文本随着 Microsoft 365 自动生成器等工具的普及而越来越常见,但这些描述常常缺少上下文中重要的具体细节或目的——它们只是初稿,而非最终描述。超出屏幕阅读器有效播报长度(约 125 个字符),塞入每一个视觉细节,会淹没那一两个真正关键的信息,尤其是对于图表等复杂图片,应直接陈述关键数据点,而非进行视觉描述。

常见问题

准备好监控您的AI可见性了吗?

开始跟踪AI聊天机器人如何在ChatGPT、Perplexity和其他平台上提及您的品牌。获取可操作的见解以改善您的AI存在。

了解更多

AI 图像优化:Alt 文本、说明和视觉搜索
AI 图像优化:Alt 文本、说明和视觉搜索

AI 图像优化:Alt 文本、说明和视觉搜索

学习如何为 AI 系统、LLM 和视觉搜索优化图片。掌握 alt 文本、说明、结构化标记和技术优化,提升 AI 可见性和引用率。

2 分钟阅读
图像SEO
图像SEO:优化图片搜索结果

图像SEO

图像SEO通过替代文本、文件名、压缩和结构化数据来优化图片在搜索中的可见性。了解如何提升在Google Images中的排名,并提高整体网站性能。...

1 分钟阅读