AI 图片替代文字：按用途描述，而不是逐像素复述

替代文字要说明图片在当前页面里贡献了什么。同一张 AI 图片，放在教程里可能需要描述视觉关系；单独作为链接时，需要说明去向；只起装饰作用时，则可能适合留空。

替代文字通常写在图片的 alt 属性中。它的任务不是证明你看清了每一片花瓣，而是让看不到图片的人，也能理解原本依靠视觉才能得到的信息或操作含义。W3C 的图片教程以这种“按用途判断”的区别作为起点。W3C WAI：图片教程

下面是一幅为本文生成的原创静物图，不是真实花艺活动的现场照片。我们把它放进不同的页面语境，看看为什么一段永久不变的描述，无法适合所有位置。

写替代文字前，先补全网页任务

直接使用本文的花艺图片，让它分别承担三个任务：解释插花构图、介绍一个虚构工作坊、链接到工作坊详情。这不是为同一组像素想出三种漂亮说法，而是判断每个页面在失去图片后，会缺少什么信息。

每次使用前，先写下图片附近的标题、已有文字、是否可以点击，以及点击后的去向或动作。“示例插花”这样的图注，与“查看工作坊详情”这样的链接文字，回答的是不同问题。先分清这两件事，再决定替代文字。

做完这一课，你应该能交付图片、针对该次用途的替代文字、必要的可见图注或完整说明，以及每个链接真实有效的目标。后面提供了可以检查的 HTML 示例。它帮助理解语义，不意味着整站已经获得无障碍认证。

不要一开始就打开一个自动描述工具，然后直接接受第一段输出。自动工具可能看到了许多正确物件，却不知道你的文章正在解释什么。告诉它页面任务有帮助，最后仍要由你检查：这段话保留下来的，是读者需要的含义，还是一份与任务无关的物品清单。

先看图片周围在说什么

假设这张图出现在一篇讲解不对称插花的文章中。段落说明：一侧可以向上伸展，另一侧则在较低位置聚集花朵。图片提供了这个关系的具体例子。

在这个语境里，可以这样写：

蓝色浅钵里的橙色花朵聚集在较低的位置，一根带叶枝条向左上方伸展。

它描述了文章要教的关系，没有把剪刀、墙面纹理和每一片叶子都列出来，因为这些细节不负责解释当前问题。W3C 对信息类图片的建议，同样强调图片在语境中的意义，而不是强制列出所有可见物件。W3C WAI：信息类图片

如果同一张图被放进“怎样准备工作台”的教程，剪刀与备用枝条就可能变得重要。先改变页面要回答的问题，再重新判断需要描述什么。

修订一段听起来正确的描述

假设初稿是：“桌上摆着漂亮的 AI 花艺图片。”它没有明显拼错，却没有教会读者理解不对称。“漂亮”是评价；在本文里，生成方式已经放在可见来源说明中；真正需要补上的，是左侧向上伸展与右下方密集花朵的关系。把句子改成前面的示例，读者才会得到这堂课缺少的信息。

也不要走向另一个极端：一口气数出所有花朵、每把工具和桌面纹理。保留一个细节的理由，是删掉它会改变对当前内容的理解。准备工具的课程需要剪刀，构图课则可能不需要。相关性是内容判断，不是“所有图片都必须写三个物件”之类的固定格式。

你可以用一个简短问题帮助删减：“这段话被读出来后，对方能否解释我们为什么在这里放这张图？”如果只能复述颜色，却说不清本节观点，就还需要修改。反过来，若图只是给工作坊详情增加气氛，也不必硬把它改写成一堂构图课。

装饰性不等于“看起来不重要”

再想象一个工作坊详情页：活动内容、地点与注意事项已经用普通文字完整说明，图片只增加气氛，不补充理解或使用页面所必需的信息。此时，空替代文字可能合适：

<img src="flower-study.webp" alt="">

留空是指引号之间没有字符，不是放一个空格，也不是直接省略这个属性。缺少 alt 时，部分屏幕阅读器可能会读出文件名。W3C 建议装饰图片使用空替代文字。W3C WAI：装饰图片

这个判断属于具体页面。不能因为花朵漂亮，就把不对称构图教程中的替代文字删空：在那里，图片提供了读者需要理解的例子。大图可以是装饰，小图也可以包含关键的信息。

还要区分“附近提到了图片”和“图片的信息已经表达完整”。一句“欢迎参加我们的漂亮工作坊”，并没有描述枝条与花朵的高低关系；在构图课里，它不能让示例变成多余内容。但是在纯活动介绍页中，这个构图关系可能从来就不是要传达的信息。应当读完所在小节再判断，而不是只找最近的一句文字。

同一张素材复用到新页面时，旧的替代文字也要重新审核。不要把图库里的一个描述字段，当作所有页面永久不变的答案。文件可以不变，用途却发生了变化；真正应当跟着页面保存的，是本次使用的语境和判断。

图片是操作入口时，说明操作

图片也可能独立充当一个链接。如果点击花艺图会打开工作坊详情，只描述花瓣并不能告诉读者链接通向哪里。替代文字应该说明目的地。例如，在一个虚构的工作坊网站中：

<a href="workshop-details.html">
  <img src="flower-study.webp"
       alt="查看植物花艺工作坊详情">
</a>

如果同一个链接内部已经有可见文字说明去向，图片可以使用空替代文字：

<a href="workshop-details.html">
  <img src="flower-study.webp" alt="">
  <span>查看植物花艺工作坊详情</span>
</a>

这是两种不同的链接结构，并不是互相竞争的通用规则。目标是让一个链接拥有清楚的名称，同时避免不必要的重复。W3C 的功能性图片示例，也区分了只有图片的链接，以及图片旁边已有等效链接文字的情况。W3C WAI：功能性图片

可以打开完整 HTML 示例，其中有中英文版本，链接都跳到同一页内的说明。它是教学页面，不是真实预约服务。检查图片的替代文字，或使用屏幕阅读器，比较两种链接的名称。

然后真的点击一次链接。名称写得再清楚，也不能弥补目的地错误。在实际网站中，“查看工作坊详情”应该打开详情，不能暗中提交报名。如果同一页有多场工作坊，还要让读者能区分它们，可以把具体名称放进链接中，而不是让每张不同的图片都只叫“了解更多”。

如果图片既是入口，又补充了其他有用信息，可以考虑把补充说明放在链接外的可见图注中，同时让链接本身拥有简洁、明确的名称。不要默认把一大段风景描写接在操作名称后。先想清楚读者凭什么选择这个入口，再安排其余需要保留的信息。

检查这种卡片时，最好分别回答两个问题：不看图片，我知道点击会发生什么吗？点击之前，我缺少了作决定需要的信息吗？第一个问题帮助检查链接名称，第二个问题帮助检查页面内容。给图片写一段更长的 alt，不一定能同时解决二者。

复杂解释需要放到 alt 之外

如果给插花图标出 A、B 两个区域，它就承担了更具体的讲解任务。简短替代文字可以指出图的主题，并告诉读者附近有完整解释；不必把整堂课塞进一口气才能听完的属性里。

**完整解释：**A 标记向左上方延伸的疏朗枝条，叶片之间的空隙，让高处保持相对通透。B 标记右侧靠近浅钵的密集橙色花朵。两处高度与密度不同，形成不对称的外轮廓。字母只是定位，不表示测量比例，也不推荐某个确定的枝条长度。

对于真正复杂的图表、示意图或地图，除了简短标识，还应提供可以访问的完整解释或数据表。W3C 建议让所有读者都能读到这部分说明。把长段落挤进 alt，不利于逐步查看，也没有表格与章节的结构。W3C WAI：复杂图片

这张 A、B 图可以用 figure 把图片与可见说明组织在一起，不需要先完成一个交互动作才能看到主要结论：

<figure>
  <img src="arrangement-notes.webp"
       alt="标有 A、B 区域的插花图，说明见下文。">
  <figcaption>
    A 是向左上方延伸的疏朗枝条。
    B 是右下方较密集的橙色花朵。
    两处高度和密度不同；字母不是测量值。
  </figcaption>
</figure>

如果它是一张带数据的图表，完整说明还需要保留相关数值与关系。“一张很有意思的图”显然不能替代这些内容。决定写更长的描述之前，也可以先看图本身是否存在不必要的复杂性：某些装饰箭头、重复标签去掉后，信息反而更容易理解。

检查完整说明时，暂时不看图，看看 A、B 是否各有明确对象，方向是否依赖某种颜色才能分辨，以及结论是不是仍藏在“如图所示”四个字后面。图解可以帮助理解，但不应让读者必须先看见图，才能读懂对图的解释。

把图片中的文字当作信息处理

一张工作坊海报可能包含名称、日期、时间和地点。只要这些文字参与传达信息，它们就不能因为海报好看而被忽略。如果其他地方没有写出这些内容，“花艺海报”会丢掉整条实用消息。应在替代文字中提供必要文案；海报内容较长时，则提供清楚关联、可以正常阅读的可见文字版本。W3C 的图片文字说明讨论了这些区别。W3C：图片文字

不要让读者再打开另一张图片，才能阅读所谓的“文字版本”。也不要把纯粹用于装饰的字母、真实活动地址和照片里偶然出现的品牌名，全部当成同一种用途。先确定哪些文字对当前页面有用，再保留它们。如果你能控制网页排版，把标题和详情直接做成 HTML 文字通常更灵活；排版指南提供了可以跟做的示例。

一个容易漏掉的检查点，是图片更新而正文没有同步。海报里的时间改成 15:00，旁边文字却仍写 14:00，不能靠一份“完善的 alt”把矛盾解决掉。先核对哪份信息正确，再同步图片与所有文字版本。这属于内容质量问题，不只是辅助技术是否能读取的问题。

分清图注、替代文字和来源说明

图注是可见的，可以告诉所有人怎样理解这张图、它来自哪里，以及有哪些限制。替代文字则在图片不可见时，补上与当前内容有关的信息或功能。两者可以重叠，但把长图注原样复制到每个 alt，容易让阅读变得重复。

在这幅静物图中，图注说明它由 AI 生成，不是真实活动的记录；替代文字描述可见的插花关系。如果“生成图还是实拍图”本身就是课程的重要区别，也应让看不到图片的人获得这个信息，可以通过上下文、图注或合适的替代文字来说明。不要把 alt 当成隐藏的披露栏或搜索关键词仓库。

AI 起草的图片描述也需要审核。不要把不确定的植物品种说成事实，不要推测真实人物的身份，也不要凭空编造真实对象的心情。只写页面需要、而且能够支持的信息。这个例子说“橙色花朵”已经足够；加上一个未经确认的精确品种，只会增加断言，并不帮助理解。

英文版本中，信息类描述是“Orange flowers cluster low in a blue bowl, while a leafy branch reaches high to the left.” 中文保存的是同样的视觉关系，而不是照着英文词序硬译。功能性描述则变成“查看植物花艺工作坊详情”。哪怕中文句子非常流畅，把花朵描述放到只有图片的链接上，也仍然选错了任务。

翻译完成后，可以把两种语言各自放回真实页面里读一遍。页面的标题可能已经提供了某个名称，旁边的图注也可能采用不同长度。不要为了逐字一致，重复目标语言读者已经得到的信息；也不能为了简洁，漏掉另一种语言仍然需要的操作去向。

不看图片，再读一遍页面

最后可以做一个简单检查：不看图片，把周围文字与替代文字读出来。能否理解这一段要点？如果是链接，能否预测它会去哪里？如果是图解，能否找到完整说明？

W3C 建议替代文字简洁，把最重要的信息放在前面。通常不必先写“这是一张图片”，但如果媒介本身影响理解，说明它是绘画、照片或插图就有价值。W3C WAI：替代文字提示

在每种语言自己的页面语境里核对一次。翻译的是功能与相关含义，不只是库存描述里的几个名词。还要检查窄屏版本：如果手机上隐藏了可见链接文字，入口仍需要保留清楚的可访问名称。

最后，不要只把视力正常的读者同样需要的信息放进替代文字。日期、价格、步骤和图表数据只要重要，就应出现在普通页面内容里。海报内文字的处理方法，可以看可编辑文字与排版指南。好的替代文字，只是让页面含义通过多种方式可获得的一部分。

练习：审核同一张图的四种用法

先为下面四个场景准备替代文字，再看判据：

1. 一堂课比较“疏朗的高处”与“密集的底部”，周围段落还没有描述示例图。
2. 工作坊详情页已经写明全部实用信息，图片只增加气氛。
3. 只有这张图片可以点击，打开工作坊详情。
4. 图片和“查看植物花艺工作坊详情”文字位于同一个链接里，图片不传达额外含义。

第一个答案应保存左侧向上、右下方密集的关系。第二个可以使用 alt=""，前提是题目中“纯装饰”的条件在真实页面中确实成立。第三个应说清目的地。第四个可以把图片的替代文字留空，因为同一个链接已经有可见名称。这些是验收条件，不是四句可以不经判断就贴到任何网站上的标准答案。

现在改变一个条件：手机版隐藏了可见的链接文字。检查无障碍树里实际还剩什么，不要假设“视觉上隐藏”一定意味着从树中删除，也不要假设一定保留；它取决于实现方式。这个入口最终仍然需要清楚的名称。这个改动检验的是你是否在检查读者真实使用的页面，而不仅是桌面截图。

为每一次放图保存一份简短交接：页面要传达什么、建议的替代文字、可见图注或完整说明、链接目标，以及核对过的语言和视口。后续编辑看到的就不只是一个孤立句子，也能明白为什么当时这样写。下次页面用途改变时，应从这个理由重新判断。

自动工具可以指出缺少属性，却不能替你决定一段诗意的花朵描写是否解释了构图课。最后一步仍然是读文章、理解任务，再把图片所贡献的意义补全。让别人只凭文字复述本节观点，比追求一段听起来十分专业的描述更能发现遗漏。